jQuery:基于rowspan长度的新类添加问题

Question

如何根据rowspan长度添加新类。例如，在表中，某些行中的rowspan在TD中，长度超过2。我需要在这些行上添加一个新类。

例如：

<table class="table table-border">
        <thead>
        <th>Ship</th>
        <th>Unit</th>
        <th>Branch</th>
        <th>Rank</th>
        <th>Sanc</th>
        </thead>
        <tbody>
        <tr class="allrow">
            <td rowspan="3">CAB1</td>
            <td rowspan="2">HM/CAB</td>
            <td rowspan="2">SEAMAN</td>
            <td>MCPO(X)</td>
            <td>MCPO</td>
        </tr>
        <tr class="allrow">
            <td>FC-I</td>
            <td>FC-J</td>
        </tr>
        <tr class="allrow">
            <td>FC-I</td>
            <td>FC-J</td>
            <td>4</td>
            <td>FC-J</td>
        </tr>
        <tr class="allrow">
            <td rowspan="3">CAB2</td>
            <td rowspan="2">HM/CAB</td>
            <td>SEAMAN</td>
            <td>MCPO(X)</td>
            <td>MCPO</td>
        </tr>
        <tr class="allrow">
            <td>FC-I</td>
            <td>FC-J</td>
            <td>FC-J</td>
        </tr>
        <tr class="allrow">
            <td>FC-I</td>
            <td>FC-J</td>
            <td>4</td>
            <td>FC-J</td>
        </tr>
        <tbody>
    </table>

在上表中，就像第一行中存在3个rowspan（CAB1，HM/CAB，Seaman）的列中，我想添加新类ships。

我正在尝试的脚本：

$('body .allrow').find('td[rowspan]').filter(function () {
        let findTdLength = $(this).length;
        if(findTdLength > 2)
        {
            $(this).parent().addClass('ships');
        }
    });

任何人可以帮我吗？

Answer 1

获取所有tr元素，并使用filter()方法过滤出来。为了过滤，请在当前上下文（当前行，使用this来参考）中使用rowspan属性（使用属性选择器）获取所有元素并比较长度。最后，将类添加到过滤的元素中。

// get all elements
$('.allrow')
  // iterate over to filter
  .filter(function() {
    // get all elements within the element with rowspan 
    // specify context parameter to filter within
    return $('[rowspan]', this).length > 2;
  })
  // finally add class
  .addClass('ships');

.ships {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-border">
  <thead>
    <th>Ship</th>
    <th>Unit</th>
    <th>Branch</th>
    <th>Rank</th>
    <th>Sanc</th>
  </thead>
  <tbody>
    <tr class="allrow">
      <td rowspan="3">CAB1</td>
      <td rowspan="2">HM/CAB</td>
      <td rowspan="2">SEAMAN</td>
      <td>MCPO(X)</td>
      <td>MCPO</td>
    </tr>
    <tr class="allrow">
      <td>FC-I</td>
      <td>FC-J</td>
    </tr>
    <tr class="allrow">
      <td>FC-I</td>
      <td>FC-J</td>
      <td>4</td>
      <td>FC-J</td>
    </tr>
    <tr class="allrow">
      <td rowspan="3">CAB2</td>
      <td rowspan="2">HM/CAB</td>
      <td>SEAMAN</td>
      <td>MCPO(X)</td>
      <td>MCPO</td>
    </tr>
    <tr class="allrow">
      <td>FC-I</td>
      <td>FC-J</td>
      <td>FC-J</td>
    </tr>
    <tr class="allrow">
      <td>FC-I</td>
      <td>FC-J</td>
      <td>4</td>
      <td>FC-J</td>
    </tr>
    <tbody>
</table>

Answer 2

尝试穿越每个tr

$('.allrow').each(function() {
  if ($(this).find('td[rowspan]').length > 2) {
    $(this).addClass('ships');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-border">
  <thead>
    <th>Ship</th>
    <th>Unit</th>
    <th>Branch</th>
    <th>Rank</th>
    <th>Sanc</th>
  </thead>
  <tbody>
    <tr class="allrow">
      <td rowspan="3">CAB1</td>
      <td rowspan="2">HM/CAB</td>
      <td rowspan="2">SEAMAN</td>
      <td>MCPO(X)</td>
      <td>MCPO</td>
    </tr>
    <tr class="allrow">
      <td>FC-I</td>
      <td>FC-J</td>
    </tr>
    <tr class="allrow">
      <td>FC-I</td>
      <td>FC-J</td>
      <td>4</td>
      <td>FC-J</td>
    </tr>
    <tr class="allrow">
      <td rowspan="3">CAB2</td>
      <td rowspan="2">HM/CAB</td>
      <td>SEAMAN</td>
      <td>MCPO(X)</td>
      <td>MCPO</td>
    </tr>
    <tr class="allrow">
      <td>FC-I</td>
      <td>FC-J</td>
      <td>FC-J</td>
    </tr>
    <tr class="allrow">
      <td>FC-I</td>
      <td>FC-J</td>
      <td>4</td>
      <td>FC-J</td>
    </tr>
    <tbody>
</table>

Answer 3

您必须使用atter读取 rowspan

请参阅摘要

$('body .allrow td').filter(function () { 
        let findTdLength = $(this).attr('rowspan');
  console.log(findTdLength);
        if(findTdLength > 2)
        {
            $(this).parent().addClass('ships');
        }
    });

.ships{
  background-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-border">
        <thead>
        <th>Ship</th>
        <th>Unit</th>
        <th>Branch</th>
        <th>Rank</th>
        <th>Sanc</th>
        </thead>
        <tbody>
        <tr class="allrow">
            <td rowspan="3">CAB1</td>
            <td rowspan="2">HM/CAB</td>
            <td rowspan="2">SEAMAN</td>
            <td>MCPO(X)</td>
            <td>MCPO</td>
        </tr>
        <tr class="allrow">
            <td>FC-I</td>
            <td>FC-J</td>
        </tr>
        <tr class="allrow">
            <td>FC-I</td>
            <td>FC-J</td>
            <td>4</td>
            <td>FC-J</td>
        </tr>
        <tr class="allrow">
            <td rowspan="3">CAB2</td>
            <td rowspan="2">HM/CAB</td>
            <td>SEAMAN</td>
            <td>MCPO(X)</td>
            <td>MCPO</td>
        </tr>
        <tr class="allrow">
            <td>FC-I</td>
            <td>FC-J</td>
            <td>FC-J</td>
        </tr>
        <tr class="allrow">
            <td>FC-I</td>
            <td>FC-J</td>
            <td>4</td>
            <td>FC-J</td>
        </tr>
        <tbody>
    </table>