检查行是否包含字符串

Question

我在写一个chrome扩展来从包含某些文本的表中删除行。现在这项工作，但文字必须确切。我想这样做，如果文本包含一个字符串（并使其不区分大小写）。我会如何去做这件事？即我想搜索“返回”，如果它是“ReTurn Tracker”，它将删除它。

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

Answer 1

这里是没有的jQuery版本。我已经从我的原始答案中更新了这一点，以便通过传递可选的第三个参数来指定文本的深层或浅层搜索。

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);

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

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

Answer 2

• 首先获得所有TDS过滤
  $("#"+ tableID +" tr td")
  如果测试searchString.toLowerCase）在这里，它只会抢的是小写字母，TD。
• 循环通过它们与
  .each(function() { });
• 测试如果
  $(this).text().toLowerCase().indexOf(searchString.toLowerCase()) >= 0
• 和删除父
  $(this).parent().remove();

代码：

运行fiddle并取出评论removeRows()功能在底部。

$(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)! 
 
});

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; 
 
}

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