Question

我在表格中点击按钮时生成动态文本框。点击按钮我正在调用详细信息（），它会在表格中添加一个新行：

  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>

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

Answer 1

您可以使用此功能（已编辑为使用非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。

使用其余代码进行演示

＆＃13;

$("#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');

＆＃13;

<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"/>

＆＃13;

表格数据在实时搜索时消失

1 个答案: