Question

我有一张表格如下：

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

每当我点击任何一行时，我都会为每一行添加一个类（例如选择）。如果我点击任何有一个名为group的类的行，那么我想在该组中的所有其他行（如果有的话）中添加/删除一个类

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

从当前行开始循环，直到再次找到组类（例如第5行）

我可以从n到n行循环遍历表吗？

Answer 1

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

见这里＆gt; some issues

您还需要获取groupIndex，以便相应地向所选tr

添加课程

当然，在点击其他元素时添加/删除选择和group1,2,3,4,5类。我添加了一些颜色（你可以在css中看到它们），例如

＆＃13;

$("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 + "")
  }
});

＆＃13;

.group1 {
  color: red;
}

.group2 {
  color: blue;
}

.group5 {
  color: yellow;
}

.selection {
  color: green
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

Public Sub BasicLoop()

    Dim i As Long

    For i = 1 To 100
        ActiveSheet.Cells(i, 1) = i * 2
        If i * 2 / 4 Mod 2 = 0 Then
            ActiveSheet.Cells(i, 2) = i * 4
        End If
    Next i

End Sub

＆＃13;

$(".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")
})

＆＃13;

.selected-header{
  color : green
}

.selected{
  color : blue
}

＆＃13;

Jquery循环表从n到n行

2 个答案: