javascript - 实时搜索后表格数据消失

我在表中单击按钮时生成动态文本框。
在按钮上单击，我正在调用Details（），这会将新行追加到表中：

  function Details(id,name)
{
        var html = '';
        html += '<tr>';
        html += '<td><input type="text" name="item_id[]" value="'+ id +'" class="form-control item_id" autofocus required /></td>';
        html += '<td><input type="text" name="item_name[]" value="'+ name +'" class="form-control item_name" required /></td>';
        html += '<td style="text-align:center"><button type="button" name="remove" class="btn btn-danger btn-sm order_item_remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';

        $("#table").append(html);
}

但是，当我尝试从表中实时搜索数据时，它的行就会消失。

即时搜寻：

$("#search_field").keyup(function() {
    var count = 0;
    var value = this.value.toLowerCase().trim();

    $("#table").find("tr").each(function(index) {
        if (index === 0) return;
        var id = $(this).find("td").text().toLowerCase().trim();
        $(this).toggle(id.indexOf(value) !== -1);

        if(id.indexOf(value) !== -1){
            count = count+1;
        }
    });
});

表：

<table class="table table-bordered" id="table">
                    <tr>
                    <th>ID</th>
                    <th>Name</th>
                    </tr>
                    </table>

我究竟做错了什么？？任何帮助，将不胜感激。

最佳答案

您可以使用以下命令（已编辑以使用非ES6语法）：

var rowMatches = $(this)
  .find(':input')
  .toArray()
  .some(function(input) { return $(input).val().toLowerCase().trim().indexOf(value) !== -1; });
$(this).toggle(rowMatches);

说明

.text()并不意味着要获取输入值。

您需要使用.val()。但是由于每行可以有多个输入，因此您要检查是否至少有一个单元格与过滤器匹配。


.toArray()将节点集转换为数组，
如果至少一个单元格的值与过滤器字符串匹配，则Array#some返回true。


使用其余代码进行演示

$("#search_field").keyup(function() {
  var count = 0;
  var value = this.value.toLowerCase().trim();

  $("#table").find("tr").each(function(index) {
    if (index === 0) return;

    var rowMatches = $(this)
      .find(':input')
      .toArray()
      .some(function(input) { return $(input).val().toLowerCase().trim().indexOf(value) !== -1; });

    $(this).toggle(rowMatches);

    if (rowMatches) {
      count = count + 1;
    }
  });
});

function Details(id, name) {
  var html = '';
  html += '<tr>';
  html += '<td><input type="text" name="item_id[]" value="' + id + '" class="form-control item_id" autofocus required /></td>';
  html += '<td><input type="text" name="item_name[]" value="' + name + '" class="form-control item_name" required /></td>';
  html += '<td style="text-align:center"><button type="button" name="remove" class="btn btn-danger btn-sm order_item_remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';

  $("#table").append(html);
}

Details(1, 'foo');
Details(2, 'bar');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table">
  <tr>
    <th>ID</th>
    <th>Name</th>
  </tr>
</table>

<input id="search_field" placeholder="Filter"/>