Question

我面临的问题是假设有3个子行，然后用我的代码仅删除一行。我想切换所有子行。

第1行
.vineet 1
.vineet 2
.vineet 3
第2行
.hrithik 1
.hrithik 2
.hrithik 3
第3行
.srk 1
.srk 2
.srk 3
因此，如果我单击第1行，则仅删除“ vineet 1”，我也要删除“ vineet 2”，“ vineet 3”。

类似地，如果我单击第2行，则应删除hrithik 1，hrithik 2，hrithik 3，全部3。

与Row3类似。

代码：

var j$ = jQuery.noConflict();
j$(document).ready(function() {
  j$('[Id$=uppertrId]').click(function() {
    alert('Hii');
    j$(this).next("tr").toggle();

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<apex:form>
  <apex:pageblock>
    <apex:slds />
    <table class="slds-table slds-table_cell-buffer slds-table_bordered" id="myTable">

      <head>
        <tr id="trid">
          <td id="tabid">
            <p>Name</p>
          </td>
          <td id="tabid">
            <p>Industry</p>
          </td>
          <td id="tabid">
            <p>Phone</p>
          </td>
        </tr>
      </head>

      <body>
        <apex:repeat value="{!wraplst}" var="wrap">
          <tr id="uppertrId">
            <td class="fname" id="nameid">>&nbsp;&nbsp;{!wrap.acc.name}</td>
            <td>{!wrap.acc.Industry}</td>
            <td>{!wrap.acc.Phone}</td>
          </tr>
          <apex:repeat value="{!wrap.conlst}" var="cont">
            <tr id="lowerId">
              <td class="lname" id="lowertdId">{!cont.Lastname}</td>
              <td>{!cont.Email}</td>
              <td>{!cont.Phone}</td>
            </tr>
          </apex:repeat>
        </apex:repeat>
      </body>
    </table>

Answer 1

您可以尝试一下。它会隐藏除单击的行之外的所有行

$(document).ready(function() {
  $('tr').click(function() {
    $(this).siblings('tr').toggle();
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>Hey</thead>
  <tr>
    <td>a</td>
  </tr>
  <tr>
    <td>b</td>
  </tr>
  <tr>
    <td>c</td>
  </tr>
  <tr>
    <td>d</td>
  </tr>
  <tr>
    <td>e</td>
  </tr>
  <tr>
    <td>f</td>
  </tr>
</table>

Answer 2

代替下一个使用$（this）.nextAll（“ tr”）。toggle（）;

Answer 3

您可以借助 .not（） jQuery过滤器

例如

function removerow(){$("tr").not(".nothide").toggle();}

<thead>
  <tr class="nothide">
    <th>Name</th>
  </tr>
</thead>
<tbody>
<tr class="nothide" onclick="removerow();">
    <td>Row 1</td>
  </tr>
  <tr>
    <td>vineet 1</td>
  </tr>
   <tr class="hide">
    <td>vineet 2</td>
  </tr>
   <tr>
    <td>vineet 3</td>
  </tr>
</tbody>

在表格中点击该行时，我想隐藏下面的tr标签

3 个答案: