如何使用javascript过滤包含输入单元格的表？

Question

我有一个表格，它接受输入并根据输入创建项目名称和描述。是否可以使用 Javascript 过滤将输入作为数据的表？我发现了很多有效的过滤器，但似乎没有一个适用于输入单元

我已经创建了一个基本版本的表格并添加了一个我正在尝试使用的 jQuery 过滤器。正如您所看到的，过滤器在单元格输入中无法正常工作 - 一旦您输入了一次搜索单元格，它也不会删除过滤器。我保留了创建新行的函数，因为我觉得这也可能导致问题。

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>

Answer 1

首先，您的 HTML 有点草率：我不得不将 <<input ... 更改为 <input ...。
还有一些<img> 后面跟着</output>

主要问题是您在表格行上使用.text()，但您应该在输入内部行上使用.val()。

我还使用了一个简单的indexOf() 来消除正则表达式错误的风险。

工作演示（去除了大部分多余或不需要的元素）：

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>