使用Jquery遍历html表

时间:2017-05-03 13:03:19

标签: jquery html-table

我有一个不确定行的HTML表,但知道列数。对于每一行,我需要找到每个td都有一个“free”类。然后我需要检查第三个td,如果它还有一个“免费”类,我需要在原始td中添加一个“start”类。作为一个例子,有6个tds的tr看起来像这样;

    <tr>
    <td class="free"></td> 
    <td class="free"></td>
    <td class="free"></td>
    <td class="free"></td>
    <td class="free"></td>
    <td class="not-free"></td>
    <td class="not-free"></td>
    </tr>

然后会是这样的:

    <tr>
    <td class="free start"></td> 
    <td class="free start"></td>
    <td class="free"></td>
    <td class="free"></td>
    <td class="free"></td>
    <td class="not-free"></td>
    <td class="not-free"></td>
    </tr>

我可以找到每个td的索引,但不知道如何找到该

之后的第三个索引
    $('td.free').each(function() {
        var this_unit = $(this).index() 
         ......
    })

2 个答案:

答案 0 :(得分:1)

你可以用free

循环遍历td元素
$('td.free').each(function(i, td) {

    var $otherTd = $(td).next().next().next();

    // could be more specific by using $td.next('td') instead of just .next()

    if ($otherTd.hasClass('free')) {
        $(td).addClass('start');
    }
});

https://codepen.io/martincarlin87/pen/Njvxva

答案 1 :(得分:0)

要实现此目的,您可以使用两个循环。一个遍历tr,另一个遍历该行中的td.free元素。对于每个.free元素,您可以使用td检查以下第三个eq()并添加到当前元素的索引。试试这个:

$('table tr').each(function() {
  var $tr = $(this);
  var $td = $tr.find('td');

  $td.filter('.free').each(function(i) {
    $(this).toggleClass('start', $td.eq(i + 3).hasClass('free'));
  });
});
td { 
  width: 20px;
  height: 20px; 
 }
.free { background-color: #CCC; }
.not-free { background-color: #333; }
.start { background-color: #C00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="free"></td>
    <td class="free"></td>
    <td class="free"></td>
    <td class="free"></td>
    <td class="free"></td>
    <td class="not-free"></td>
    <td class="not-free"></td>
  </tr>
</table>