jQuery在每个thead之后将循环添加到循环中的最后一个tbody

时间：2018-04-23 06:42:49

标签： javascript jquery html

在html中，我的标记就像这样

<table class="section-table">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

我想在thead之后为每个最后的tbody添加一个类。所以基本上我的输出应该是这样的

<table class="section-table">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody class="last-row">
        <tr>
            <td></td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody class="last-row">
        <tr>
            <td></td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody class="last-row">
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

我已经尝试过这段代码，但它根本不起作用。

jQuery('table.section-table').find('thead').each(function() {
    jQuery(this).nextAll('tbody').last().addClass('last-row');
  });

4 个答案:

答案 0 :(得分：0)

jQuery('table.section-table').find('thead').each(function() {
    jQuery(this).prev('tbody').addClass('last-row');
  });
  
  $('table.section-table tbody:last-child').addClass('last-row');
.section-table tbody{
background-color:#F00;
}

.section-table tbody.last-row{
background-color:#FF0;
}


.section-table td{
height:30px;
width:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="section-table">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

尝试使用prev（'tbody'），因为你最后没有thead，你需要添加tbody：last-child。

答案 1 :(得分：0)

您可以在tbody之前将该类添加到所有thead，然后将同一个类添加到上一个tbody 

jQuery('table.section-table').find('thead').each(function() {
    jQuery(this).prev('tbody').addClass('last-row');
});

jQuery('table.section-table').find('tbody').last().addClass('last-row');

<强>演示

＆＃13;
＆＃13; 
jQuery('table.section-table').find('thead').each(function() {
    jQuery(this).prev('tbody').addClass('last-row');
});

jQuery('table.section-table').find('tbody').last().addClass('last-row');
＆＃13; 
.last-row
{
  background-color:#ccc;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
    <thead>
        <tr>
            <th>12</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>312</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>45</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>45</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>45</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>45</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>45</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>45</td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <th>rftg</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>45</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>45</td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <th>g</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>345</td>
        </tr>
    </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您可以先将该类添加到<tbody>的所有<thead>，这只是<tbody>的前一个元素。使用它将使您在HTML表格中保留最后<tbody>个未更改的内容，因此您应该再添加一行JQuery，这将为此剩余的jQuery('table.section-table').find('thead').each(function() { jQuery(this).prev('tbody').addClass('last-row'); }); $('table.section-table tbody').last().addClass('last-row');添加类。 

.last-row{
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
    <thead>
        <tr>
            <th>0</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>3</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>4</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>5</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>6</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>7</td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <th>8</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>9</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>10</td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <th>1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2</td>
        </tr>
    </tbody>
</table>
dose

答案 3 :(得分：0)

您可以使用.nextUntil()定位所有兄弟姐妹，直到遇到<THEAD>，然后使用.last()获取所需的元素并添加课程。

jQuery('table.section-table').find('thead').each(function() {
  jQuery(this).nextUntil('thead').last().addClass('last-row');
});

＆＃13;
＆＃13; 
jQuery('table.section-table').find('thead').each(function() {
  jQuery(this).nextUntil('thead').last().addClass('last-row');
});
＆＃13; 
.last-row {
  background-color: #ccc;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
  <thead>
    <tr>
      <th>HEAD 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>312</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>45</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>45</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>45</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>45</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>45</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>45</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>HEAD 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>45</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>45</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>HEAD 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>345</td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题