Question

如何基于行跨度长度添加新类。例如，在一个表中，某行的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行跨度（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()方法进行过滤。要进行过滤，请在当前上下文（当前行，使用rowspan进行引用）中获取具有this属性（使用has attribute selector）的所有元素，并比较长度。最后，将类添加到过滤的元素中。

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

您必须使用attr来阅读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>

jQuery：基于行跨度长度的新类添加问题

3 个答案: