检查行是否包含字符串

Question

我正在编写Chrome扩展程序以从包含特定文本的表中删除行。现在这项工作，但文字必须准确。如果文本包含一个字符串（并使其不区分大小写），我想这样做。我该怎么办呢？即我想搜索＆＃34;返回＆＃34;如果是＆＃34; ReTurn Tracker＆＃34;它将删除它。

function removeRows(tableID, searchString){
    $("#"+ tableID +" tr td:contains('" + searchString + "')").each(function() {
        if ($(this).text() == searchString) {
            $(this).parent().remove();
        }
    });
}

Answer 1

这是一个没有jQuery的版本。我已从原始答案中更新了此内容，以便通过传入可选的第3个参数来指定文本的深度或浅层搜索。

＆＃13;

＆＃13;

function removeRows(id, search, deep){
  // -----------------------------
  // We want to ensure case insensitivity
  // -----------------------------
  var searchString = search.toLowerCase();
  // -----------------------------

  // -----------------------------
  // Find the direct cells of this table.
  // -----------------------------
  var cells = document.querySelectorAll(id + " > tbody > tr > td");
  // -----------------------------

  for (var i = 0; i< cells.length; i++){
    var thisCell = cells[i];

    // -----------------------------
    // find the correct text in this cell (shallow or deep)
    // -----------------------------
    var cellText = (function(thisCell, deep){
      // -----------------------------
      // if deep is requested just use innerText and be done with
      // remember this is case insensitive...
      // -----------------------------
      if (deep) { return thisCell.innerText.toLowerCase(); }
      // -----------------------------
      
      // -----------------------------
      // if deep is not requested (or unspecified) we will search for
      // text node children and ignore the rest of the children in the search
      // -----------------------------
      var strings = [];
      var child = thisCell.firstChild;
      while (child){
        if (child.nodeType == 3) { strings.push(child.data); }
        child = child.nextSibling;
      }
      
      return strings.join(" ").toLowerCase();
      // -----------------------------

    })(thisCell, deep);
    // -----------------------------
    
    // -----------------------------
    // Finally, if the search text is found within this cell's text
    // then we will remove this cell's parent.
    // -----------------------------
    if (cellText.indexOf(searchString) != -1 ) {
      var cellParent = thisCell.parentNode;
      cellParent.parentNode.removeChild(cellParent);
    }
    // -----------------------------

  }
}

removeRows("#target", "a");
removeRows("#target2", "a", false);
removeRows("#target3", "a", true);

＆＃13;

table{
  background-color: aliceblue;
  border: solid 1px;
  margin: 1em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="target">
  <tr><td>Abcd</td><td>efgh</td></tr>
  <tr><td>dfsjkl</td><td>Anop</td></tr>
  <tr><td>dsfjkl</td><td>mnop</td></tr>
</table>

<table id="target2">
  <tr><td>Abcd</td><td>efgh</td></tr>
  <tr><td>dfsjkl</td><td>Anop</td></tr>
  <tr>
    <td>
      <table id="target2b">
        <tr><td>Abcd</td><td>efgh</td></tr>
        <tr><td>dfsjkl</td><td>Anop</td></tr>
        <tr><td>dsfjkl</td><td>mnop</td></tr>
      </table>
    </td>
    <td>mnop</td>
  </tr>
  <tr><td>dsfjkl</td><td>mnop</td></tr>
</table>

<table id="target3">
  <tr><td>Abcd</td><td>efgh</td></tr>
  <tr><td>dfsjkl</td><td>Anop</td></tr>
  <tr>
    <td>
      <table id="target3b">
        <tr><td>Abcd</td><td>efgh</td></tr>
        <tr><td>dfsjkl</td><td>Anop</td></tr>
        <tr><td>dsfjkl</td><td>mnop</td></tr>
      </table>
    </td>
    <td>mnop</td>
  </tr>
  <tr><td>dsfjkl</td><td>mnop</td></tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

• 首先获取所有tds进行过滤 $("#"+ tableID +" tr td") 如果你在这里测试searchString.toLowerCase，那么它只会抓住较低的td。
• 以.each(function() { });
循环播放
• 测试是否
  $(this).text().toLowerCase().indexOf(searchString.toLowerCase()) >= 0
• 并删除父项$(this).parent().remove();

的代码：

运行 fiddle 并删除底部注释的removeRows()功能。

＆＃13;

＆＃13;

$(document).ready(function() {
  function removeRows(tableID, searchString){
      $("#"+ tableID +" tr td").each(function() {
          if($(this).text().toLowerCase().indexOf(searchString.toLowerCase()) >= 0) {
              $(this).parent().remove();
          }
      });
  }
  
  // removeRows('test-table', 'row'); // uncomment this code (and run again)!
});

＆＃13;

tr:nth-child(even) {
  background: white;
  text-align: center;
}
tr:nth-child(odd) {
  background: lightblue;
  text-align: center;
}
thead tr th {
  background-color: black;
  color: white;
}
table {
  background: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="test-table">
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
    <tr>
      <td>Body content 3</td>
      <td>Body content 4</td>
    </tr>
    <tr>
      <td>delete row</td>
      <td>Body content</td>
    </tr>
    <tr>
      <td>Body content 5</td>
      <td>Body content 6</td>
    </tr>
    <tr>
      <td>Body content 7</td>
      <td>Body content 8</td>
    </tr>
    <tr>
      <td>Body content 9</td>
      <td>Body content 10</td>
    </tr>
    <tr>
      <td>Body content</td>
      <td>and this row</td>
    </tr>
    <tr>
      <td>Body content 11</td>
      <td>Body content 12</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
</table>

＆＃13;

＆＃13;

＆＃13;