Question

让我说我有这个HTML。

<tr>
      <td>Spain</td>
      <td>Madrid</td>
      <td>Barcelona</td>
      <td>Sevilla</td>
</tr>

<tr>
      <td>UK</td>
      <td>Scotland</td>
      <td>London</td>
      <td>Edinburgh</td>
</tr>

现在我想删除一个tr，其子td值为西班牙，马德里和巴塞罗那，无论第四个孩子有什么。

如何实现这一目标？如果使用jQuery，会更好。

先谢谢你。

Answer 1

您可以使用以下内容：

$("tr:contains('Spain'):contains('Madrid'):contains('Barcelona')").remove();

还要确保您已将tr包裹在标记中的table

Answer 2

您可以在数组中创建一个带有2个参数的函数：table元素和要匹配的值。你可以这样称呼它：

filterOut(document.getElementById('myTable'), ['Spain', 'Madrid', 'Barcelona']);

演示

function filterOut(table,contents){
  var rows = table.getElementsByTagName('tr'),
      cells,
      match;
  for(var i=0; i<rows.length; i++){
    match = true;
    cells = rows[i].getElementsByTagName('td');
    for(var j=0, l=cells.length; j<l && j<contents.length; j++){
      if(cells[j].textContent.trim() != contents[j]) { match = false; break; }
    }
    if(match){ rows[i].parentNode.removeChild(rows[i]); i--; }
  }
}

document.getElementById('filter-btn').addEventListener('click', function(){
  filterOut(document.getElementById('myTable'), ['Spain', 'Madrid', 'Barcelona']);
});

<table id="myTable">
  <tr>
    <td>Spain</td>
    <td>Madrid</td>
    <td>Barcelona</td>
    <td>Sevilla</td>
  </tr>
  <tr>
    <td>UK</td>
    <td>Scotland</td>
    <td>London</td>
    <td>Edinburgh</td>
  </tr>
  <tr>
    <td>Spain</td>
    <td>Madrid</td>
    <td>Barcelona</td>
    <td>London</td>
  </tr>
  <tr>
    <td>Spain</td>
    <td>Madrid</td>
    <td>Paris</td>
    <td>Sevilla</td>
  </tr>
</table>

<button id="filter-btn">Filter</button>

的JavaScript。根据子值删除节点

2 个答案:

演示