代码之家 › 专栏 › 技术社区 › user2739418

从n到n行的Jquery循环表

html-table html jquery

-1

user2739418 · 技术社区 · 7 年前

我有一张表格如下:

<table>
  <tr class='group'>
    <td>Group 1 </td>
  </tr>
  <tr>
    <td> Group 1 item 1</td>
  </tr>
  <tr>
    <td> Group 1 item 2</td>
  </tr>
  <tr>
    <td> Group 1 item 3</td>
  </tr>
  <tr class='group'>
    <td> group 2</td>
  </tr>
  <tr>
    <td> group 2 item 1</td>
  </tr>
  <tr class='group'>
    <td> group 3</td>
  </tr>
  <tr class='group'>
    <td> group 4</td>
  </tr>
  <tr class='group'>
    <td> group 5</td>
  </tr>
  <tr>
    <td> group 5 item 1</td>
  </tr>
  <tr>
    <td> group 5 item 2</td>
  </tr>
</table>

e、 g.如果我点击第一行,它有一个名为group的类,那么我应该将另一个类添加到第2、3和4行,它们属于第1行(组1)。

我可以在表中从n行循环到n行吗?

2 回复 | 直到 7 年前

Mihai T 7 年前

你可以用 nextUntil() 方法选择下一个元素,直到到达下一个元素 tr.group

请参见此处> nextUntil()

您还需要获得 groupIndex 因此,您可以将相应的类添加到选定的 tr

当然,在单击其他元素时添加/删除选择和group1,2,3,4,5类。我添加了一些颜色(你可以在css中看到)作为示例

$("tr").click(function() {
  var groupIndex = $(this).closest('table').find('.group').index(this) + 1
  $(".selection").removeClass("selection")

  $(this).addClass("selection") //for example
  if ($(this).hasClass("group")) {
    $(this).siblings().not(".group").removeClass()
    $(this).nextUntil(".group").addClass("group" + groupIndex + "")
  }
});

.group1 {
  color: red;
}

.group2 {
  color: blue;
}

.group5 {
  color: yellow;
}

.selection {
  color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class='group'>
    <td>Group 1 </td>
  </tr>
  <tr>
    <td> Group 1 item 1</td>
  </tr>
  <tr>
    <td> Group 1 item 2</td>
  </tr>
  <tr>
    <td> Group 1 item 3</td>
  </tr>
  <tr class='group'>
    <td> group 2</td>
  </tr>
  <tr>
    <td> group 2 item 1</td>
  </tr>
  <tr class='group'>
    <td> group 3</td>
  </tr>
  <tr class='group'>
    <td> group 4</td>
  </tr>
  <tr class='group'>
    <td> group 5</td>
  </tr>
  <tr>
    <td> group 5 item 1</td>
  </tr>
  <tr>
    <td> group 5 item 2</td>
  </tr>
</table>

-1

agit 7 年前

使用 nextUntil() JQuery用于更改子组元素的类的函数。

$(".group").on("click",function(e){
	
  $(this).siblings(".group").removeClass("selected-header")
  $(this).addClass("selected-header")

  $(this).siblings().not(".group").removeClass("selected")
  $(this).nextUntil(".group").addClass("selected")
})

.selected-header{
  color : green
}

.selected{
  color : blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class='group'> <td>Group 1 </td> </tr>
<tr> <td> Group 1 item 1</td> </tr>
<tr> <td> Group 1 item 2</td> </tr>
<tr> <td> Group 1 item 3</td> </tr>
<tr class='group'> <td> group 2</td> </tr>
<tr> <td> group 2 item 1</td> </tr>
<tr class='group'> <td> group 3</td> </tr>
<tr class='group'> <td> group 4</td> </tr>
<tr class='group'> <td> group 5</td> </tr>
<tr> <td> group 5 item 1</td> </tr>
<tr> <td> group 5 item 2</td> </tr>
</table>