Question

我正在使用包含以下数据的表格

<table>
    <tr>
        <td> cat </td>
        <td> dog </td>
    </tr>
    <tr>
        <td> hen </td>
        <td> cock </td>
    </tr>
</table>

我想根据表格中给出的特定数据删除该行。但我不知道如何根据特定数据删除行

Answer 1

试试这个：

var table = document.querySelector('table');
var filterInput = document.querySelector('#filter');

filterInput.onkeyup = function () {
    var val = this.value;
    var td = table.getElementsByTagName('td');
    var rows = [];
    [].slice.call(td).forEach(function (el, i) {
        if (el.textContent === val) {
            rows.push(el);
        }
    });
    rows.forEach(function(el) {
        el.parentNode.style.display = 'none';
    });
};

<input type="text" id="filter" placeholder="Hide row containing...">
<table>
    <tr>
        <td>cat</td>
        <td>dog</td>
    </tr>
    <tr>
        <td>hen</td>
        <td>cock</td>
    </tr>
</table>

Answer 2

找到所需元素，然后使用style property to hide it。 在示例中，我继续隐藏与数据dog对应的表数据元素。

＆＃13;

var tds = $("td");
for(var i =0 ; i< tds.length ; i++)
{
  var tdval = tds[i].innerHTML;
  if(tdval.trim()=="dog")
  {
    document.getElementsByTagName("td")[i].style.display = "none"; 
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td> cat </td>
    <td> dog </td>
  </tr>
  <tr>
    <td> hen </td>
    <td> cock </td>
  </tr>
</table>

＆＃13;

无法从表中删除行

2 个答案: