How to filter table that contains input cells using javascript?

Question

I have a table that take inputs and creates item names and descriptions based on the inputs. Is it possible using Javascript to filter a table that picks up inputs as data? i've found a lot of functioning filters but none seem to work with input cells

i've created a basic version of my table and added a jQuery filter i'm trying to use. As you can see the filter isn't functioning properly with the cell inputs - It also won't remove the filter once you've inputted into the search cell once. i've kept the function that creates new rows as i feel this might be causing problems as well.

function cloneRow() {
    var rowAmmount = document.getElementById("rowAmmount").value;
    var getTotalRows = $('table > tbody').children().length;
    for (var i = -1; i < rowAmmount-1;i++) {
      var row = document.getElementById("row"); // find row to copy
      var table = document.getElementById("table"); // find table to append to
      var clone = row.cloneNode(true); // copy children too
      clone.id = "newRow" + (getTotalRows + i); // change id or other attributes/contents
      clone.classList.remove('hidden');
      table.appendChild(clone); // add new row to end of table
      $('#newRow' + (getTotalRows + i)).children().each(function() {
        $(this).children().attr('id', $(this).children().attr('id') + (getTotalRows + i));
      });
    }
}

var $rows = $('#table tr');

$('#search').keyup(function() {
var val = '^(?=.*\\b'
        + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b')
        + ').*$',
    reg = RegExp(val, 'i'),
    text;

$rows.show().filter(function() {
    text = $(this).text().replace(/\s+/g, ' ');
    return !reg.test(text);
}).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="rowAmmount"/>
<button id="add" onclick="cloneRow()">New Row</button>
<button type="button" onclick="submit()">Submit</button>
<select id="select">
  <option value="html">HTML</option>
  <option value="packlist">Packlist</option>
</select>
<<input type="text" id="search" placeholder="Type to search">
<table>
  <thead>
    <tr>
      <th>No.</th>
      <th>Product Code</th>
      <th>Item Name</th>
      <th>Long Description</th>
      <th>Material</th>
      <th>Material Position</th>
      <th>Style</th>
      <th>Colour</th>
      <th>Dimensions</th>
      <th>Image</th>
      <th>Item Name</th>
      <th>Packlist</tr>
  </thead>
  <tbody  id="table">
    <tr id="row">
      <td id="no"></td>
      <td><input id="productId" placeholder="Input"></td>
      <td><input id="itemname" placeholder="Input"></td>
      <td><input id="long" placeholder="Input"></td>
      <td><input id="fabric" placeholder="Input"></td>
      <td><input id="fabricInput" placeholder="Input 'Yes' 'No' or 'Number'"></td>
      <td><input id="style" placeholder="Input"></td>
      <td><input id="colour" placeholder="Input"></td>
      <td><input id="dimensions" placeholder="Input"></td>
      <td ><img id="image" src=""></output></td>
      <td ><output id="name"></output></td>
      <td><output id="description"></output></td>
    </tr>
    <tr id= "newRow0">
      <td id="no0"></td>
      <td><input id="productId0" placeholder="Input"></td>
      <td><input id="itemname0" placeholder="Input"></td>
      <td><input  id="long0" placeholder="Input"></td>
      <td><input  id="fabric0" placeholder="Input"></td>
      <td><input  id="fabricInput0" placeholder="Input 'Yes' 'No' or 'Number'"></td>
      <td><input  id="style0" placeholder="Input"></td>
      <td><input  id="colour0" placeholder="Input"></td>
      <td><input s id="dimensions0" placeholder="Input"></td>
      <td ><img id="image0" src=""></output></td>
      <td ><output id="name0"></output></td>
      <td><output id="description0"></output></td>
    </tr>
  </tbody>
</table>

Please explain with an example, exactly what you want to do. — Kavian K.
– Kavian K., Commented Jun 21, 2018 at 16:05
okay cool, i've added more details to my queries - let me know if it's still not clear what i'm trying to achieve. — D.Cliffe
– D.Cliffe, Commented Jun 21, 2018 at 16:16

Peter B · Accepted Answer · 2018-06-21 17:12:24Z

2

First, your HTML is a bit sloppy: I had to change <<input ... to <input ....
And some <img> were followed by </output>

The main issue is that you are using .text() on the table rows, but instead you should be using .val() on the inputs inside the rows.

Also I used a simple indexOf() to eliminate the risk of the regex being wrong.

Working demo (stripped most of the redundant or unneeded elements):

var $rows = $('#table tr');

$('#search').keyup(function() {
  var searchText = $(this).val();
  $rows
    .show()
    .filter(function() {
      var $inputs = $(this).find("input:text");
      var found = searchText.length == 0; // for empty search, show all rows
      for (var i=0; i < $inputs.length && !found; i++) {
        var text = $inputs.eq(i).val().replace(/\s+/g, ' ');
        found = text.length > 0 && text.indexOf(searchText) >= 0;
      }
      return !found;
   })
   .hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="search" placeholder="Type to search">
<table>
  <thead>
    <tr>
      <th>Product Code</th>
      <th>Item Name</th>
      <th>Long Description</th>
  </thead>
  <tbody  id="table">
    <tr id="row">
      <td><input id="productId" placeholder="Input"></td>
      <td><input id="itemname" placeholder="Input"></td>
      <td><input id="long" placeholder="Input"></td>
    </tr>
    <tr id="newRow0">
      <td><input id="productId0" placeholder="Input"></td>
      <td><input id="itemname0" placeholder="Input"></td>
      <td><input id="long0" placeholder="Input"></td>
    </tr>
  </tbody>
</table>

answered Jun 21, 2018 at 17:12

Peter B

24.7k5 gold badges42 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

D.Cliffe Over a year ago

okay, i see - thank you that works great! how would i make the search so it's not case sensitive?

Peter B Over a year ago

You could simply apply .toLowerCase() to both searchText (once) and to text (every time it is set) to achieve that. Or else see stackoverflow.com/q/8993773/1220550 for some alternatives.

Collectives™ on Stack Overflow

How to filter table that contains input cells using javascript?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related