Question

我有一个表，该表使用搜索功能来过滤表中的行。我已经具有正常运行的查找和替换功能，但是它将替换匹配搜索的表中的所有单元格值，而忽略了过滤器。我正在尝试创建仅处理经过过滤的单元格的查找和替换功能。我通常使用纯JavaScript，但从研究看来，仅选择可见元素是jQuery的工作。我在stackoverflow上找到了一个脚本，为此我尝试进行编辑，但是我无法使其正常运行。

我想知道是否可以仅在DOM中的可见元素上使用这种类型的功能？

    $('#search').keyup(function(e) {
      if (e.which == 13 || e.which == 8 ) {
              var $rows = $('#table tr');
      var searchText = $(this).val().toLowerCase();
      $rows
        .show()
        .filter(function() {
          var $inputs = $(this).find("input");
          var found = searchText.toLowerCase().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.toLowerCase().length > 0 && text.toLowerCase().indexOf(searchText) >= 0;
          }
          return !found;
       })
       .hide();
    };
  })

  function submit(){

  var replace = document.getElementById("replace").value;
  var find = new RegExp(document.getElementById('find').value, 'gi')
  $("tr, td").each(function() {
    var text = $(this).text();
    text = text.replace(find,replace);
    $(this).text(text);
});}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input placeholder="Find" id="find">
  <input id="replace"  type="text" placeholder="Replace">
    <button onclick="submit()">submit</button>
    <input id="search" placeholder="Search">

  <table id="table">
    <tbody>
      <tr>
      <td><input id="input1"></td>
      <td><input id="input2"></td>
      <td><input id="input3"></td>
      <td><input id="input4"></td>
      <td><input id="input5"></td>
      <td><input id="input6"></td>
      </tr>
      <tr>
      <td><input id="input1"></td>
      <td><input id="input2"></td>
      <td><input id="input3"></td>
      <td><input id="input4"></td>
      <td><input id="input5"></td>
      <td><input id="input6"></td>
      </tr>
      <tr>
      <td><input id="input1"></td>
      <td><input id="input2"></td>
      <td><input id="input3"></td>
      <td><input id="input4"></td>
      <td><input id="input5"></td>
      <td><input id="input6"></td>
      </tr>
      </body>
  </table>

Answer 1

您可以尝试使用visible selector：

错误

$("tr, td:visible").each(function() {
    var text = $(this).text();
    text = text.replace(find,replace);
    $(this).text(text);
});

正确

$("tr, td").find("input:visible").each(function() {
    var text = $(this).val();
    text = text.replace(find,replace);
    $(this).val(text);
});

所以问题是您要替换单元格的文本，但文本是输入，因此，要查看更改，您必须按照代码段修改输入的值

JSFiddle

使用JavaScript查找和替换表中仅过滤的行

1 个答案: