Как использовать JavaScript / jQuery ключевое слово «this» для переключения строк

Question

У меня есть форма, которая будет публиковать данные в таблицу и разделять данные на две строки: заголовок строки и тело строки (аналогично загрузочному заголовку гармошки и телу карты). Изначально всякий раз, когда я нажимаю на кнопку, переключаются оба тела строк. Теперь, это только переключение тела первого ряда.

Как использовать ключевое слово this, чтобы при нажатии button1 на row-header1 переключалось row-body1, а button2 на row-header2 переключалось 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>

SCRIPT

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

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

См. Мой JSFiddle для модифицированной версии вышеуказанного кода, но без ejs.

Я провел дни, рассматривая подобные вопросы и пытаясь адаптировать данные ответы к моему сценарию, но безуспешно.

Answer 1

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 2

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

Answer 3

Не следует использовать 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/