javascript - jQuery - 如果表 tr 中有 4 个 td 做某事

Question

我正在尝试从 table 中删除内部 td 少于 4 个的 tr。

例如，在这个表中我希望第二个 tr 消失:

HTML

<table>
  <tbdy>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

我正在尝试这样的事情

jQuery

if ($('table tbody tr td').length >= 4) {
  //4 i ok so do nothing
} else {
  $(this).parent("tr").remove();
}

但我对此毫无进展。有什么帮助吗？

Answer 1

使用 jQuery :has()选择器 :not()和 :nth-child()伪类选择器。

$('tr:not(:has(:nth-child(4)))').remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

<小时/>

或者，使用 filter()方法过滤出仅包含 td 小于 4 的元素并删除。

$('tr').filter(function() {
  return $(this).children('td').length < 4;
}).remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>