如何使用 JavaScript/jQuery "this" 关键字来切换行

Question

我有一个表单可以将 post 数据转换为 table 并将数据分成两行，一个 row-header 和一个 row-body（类似于 bootstrap 手风琴 card-header 和 card-body)。最初，每当我单击一个按钮时，它都会同时切换 row-bodies。现在，它现在只切换第一行 body。

如何使用 this 关键字，以便当我在 row-header1 上单击 button1 时，它会在 row-body1 和 button2 之间切换=19=] 切换 row-body2?

这是我实际使用的代码，但它包含 ejs：

<table class="table table-hover table-sm">
<thead>
  <tr>
    <th><i class="fas fa-cart-plus"></i></th>
    <th>Deadline</th>
    <th>Award</th>
    <th>Fee</th>
    <th>#Copies</th>
    <th>Genre</th>
    <th>More Info</th>
  </tr>
</thead>

<tbody>
  <!--Row header-->
  <tr id="table-header">
    <% awards.forEach(function(award){ %>
    <td><input type="checkbox" name="" value=""/></td>
    <td><%= award.deadline %></td>
    <td><%= award.awdname %></td>
    <td>$<%= award.fee %></td>
    <td><%= award.copies %></td>
    <td><%= award.genre %></td>
    <td><button id="moreInfo">Click Me</i></button></td>

  <!--Row body    -->
  <tr id="table-body">
    <td colspan="7">
      <div class="showContent hide"><label for="">Description:</label> <%= award.desc %></div>
      <div class="showContent hide"><label for="">Sponsored by:</label> <%= award.sponsor %></div>
      <div class="showContent hide"><label for="">Prize: $</label><%= award.prize %></div>
      <div class="showContent hide"><label for="">Shipping status:</label> <%= award.postorarrive %></div>
      <div class="showContent hide"><label for="">Website:</label> <%= award.url %></div>
    </td>
  </tr>
  <tr><% }); %></tr>               
</tbody>
</table>

脚本

$("#table-body").hide();

$("#moreInfo").on("click", function() {
    $("#table-body").toggle();
});

查看我的 JSFiddle 以获得上述代码的修改版本，但没有 ejs。

我花了几天时间查看类似的问题并尝试根据我的情况调整给定的答案，但没有成功。

Answer 1

你不应该使用 id 作为多个按钮的选择器，因为每个元素，为了被 id 正确选择，应该是唯一的，因此一个一个被选择。对于通用功能，当要选择多个相似元素时，应使用 class 代替。

<table class="table table-hover table-sm">
    <thead>
        <tr>
            <td>Row#</td>
            <th><i class="fas fa-cart-plus"></i></th>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th>Details</th>
        </tr>
    </thead> 
    <tbody>
        <!--Row header-->
        <tr>
            <td>1</td>
            <td><input type="checkbox" name="" value=""/></td>
            <td>Row1 Content1</td>
            <td>R1C2</td>
            <td>R1C3</td>
            <td><button class="moreInfo">Click Me</button></td> 
        </tr> 
        <!--Row body   -->
        <tr class="table-body">
            <td colspan="7" class="hiddenRow">
                <div class="showContent"><label for="">Description1:</label></div>  
            </td>
        </tr> 
        <tr>
            <td>2</td>
            <td><input type="checkbox" name="" value=""/></td>
            <td>Row2 Content1</td>
            <td>R2C2</td>
            <td>R2C3</td>
            <td><button class="moreInfo">Click Me</button></td> 
        </tr> 
        <!--Row body   -->
        <tr class="table-body">
            <td colspan="7" class="hiddenRow">
                <div class="showContent"><label for="">Description2:</label></div>  
            </td>
        </tr> 
    </tbody>
</table>

$(".table-body").hide();
$(".moreInfo").on("click", function(){
    $(this).parent().parent().next().toggle();
});

https://jsfiddle.net/kaxocr7h/1/

Answer 2

id 应该是唯一的，使用 class 选择器查看下面的代码。

$(document).ready(function() {
  $(".table-body").hide();
  $(".moreInfo").on("click", function() {
    $(this).closest('tr').next(".table-body").toggle();
  });
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-sm">
  <thead>
    <tr>
      <td>Row#</td>
      <th><i class="fas fa-cart-plus"></i></th>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Details</th>
    </tr>
  </thead>

  <tbody>
    <!--Row header-->
    <tr id="table-header">
      <td>1</td>
      <td><input type="checkbox" name="" value="" /></td>
      <td>Row1 Content1</td>
      <td>R1C2</td>
      <td>R1C3</td>
      <td><button class="moreInfo">Click Me</button></td>
    </tr>

    <!--Row body   -->
    <tr class="table-body">
      <td colspan="7" class="hiddenRow">
        <div class="showContent hide"><label for="">Description1:</label></div>
      </td>
    </tr>

    <tr id="table-header">
      <td>2</td>
      <td><input type="checkbox" name="" value="" /></td>
      <td>Row2 Content1</td>
      <td>R2C2</td>
      <td>R2C3</td>
      <td><button class="moreInfo">Click Me</button></td>
    </tr>


    <!--Row body   -->
    <tr class="table-body">
      <td colspan="7" class="hiddenRow">
        <div class="showContent hide"><label for="">Description2:</label></div>
      </td>
    </tr>

  </tbody>
</table>

Answer 3

$(".table-body").hide();
$(document).on("click", ".moreInfo", function(){
   $(this).parent().parent().next().toggle();
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->


<table class="table table-hover table-sm">
    <thead>
        <tr>
            <td>Row#</td>
            <th><i class="fas fa-cart-plus"></i></th>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th>Details</th>
        </tr>
    </thead>
    
    <tbody>
        <!--Row header-->
        <tr id="table-header">
            <td>1</td>
            <td><input type="checkbox" name="" value=""/></td>
            <td>Row1 Content1</td>
            <td>R1C2</td>
            <td>R1C3</td>
            <td><button id="moreInfo" class="moreInfo">Click Me</button></td> 
        </tr>
        
        <!--Row body   -->
        <tr id="table-body" class="table-body">
            <td colspan="7" class="hiddenRow">
                <div class="showContent hide"><label for="">Description1:</label></div>  
            </td>
        </tr>
        
        <tr id="table-header">
            <td>2</td>
            <td><input type="checkbox" name="" value=""/></td>
            <td>Row2 Content1</td>
            <td>R2C2</td>
            <td>R2C3</td>
            <td><button id="moreInfo"  class="moreInfo">Click Me</button></td> 
        </tr>
        
        
        <!--Row body   -->
        <tr id="table-body" class="table-body">
            <td colspan="7" class="hiddenRow">
                <div class="showContent hide"><label for="">Description2:</label></div>  
            </td>
        </tr>
                 
    </tbody>
</table>

为 moreInfo 按钮和必须切换的 table 行添加一个 class

    <table class="table table-hover table-sm">
        <thead>
            <tr>
                <td>Row#</td>
                <th><i class="fas fa-cart-plus"></i></th>
                <th>Column1</th>
                <th>Column2</th>
                <th>Column3</th>
                <th>Details</th>
            </tr>
        </thead>

        <tbody>
            <!--Row header-->
            <tr id="table-header">
                <td>1</td>
                <td><input type="checkbox" name="" value=""/></td>
                <td>Row1 Content1</td>
                <td>R1C2</td>
                <td>R1C3</td>
                <td><button id="moreInfo" class="moreInfo">Click Me</button></td> 
            </tr>

            <!--Row body   -->
            <tr id="table-body" class="table-body">
                <td colspan="7" class="hiddenRow">
                    <div class="showContent hide"><label for="">Description1:</label></div>  
                </td>
            </tr>

            <tr id="table-header">
                <td>2</td>
                <td><input type="checkbox" name="" value=""/></td>
                <td>Row2 Content1</td>
                <td>R2C2</td>
                <td>R2C3</td>
                <td><button id="moreInfo"  class="moreInfo">Click Me</button></td> 
            </tr>


            <!--Row body   -->
            <tr id="table-body" class="table-body">
                <td colspan="7" class="hiddenRow">
                    <div class="showContent hide"><label for="">Description2:</label></div>  
                </td>
            </tr>

        </tbody>
    </table>






    $(".table-body").hide();
$(document).on("click", ".moreInfo", function(){
   $(this).parent().parent().next().toggle();
});

如何使用 JavaScript/jQuery "this" 关键字来切换行

How to use JavaScript/jQuery "this" keyword to toggle rows

html

javascript

jquery

html-table

toggle