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>

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

1 个答案: