如何打开tr tr点击内部tr点击

Question

我有一个表格，我想打开同一个tr内部tr点击加号图标。我不明白我打开哪个html元素。

请帮我一把。 在此先感谢。

<div class="procedure-table"> 
 
    <table class="table" style="border: 2px slide;"> 
 
     <thead> 
 
      <tr> 
 
       <th>Procedure Name</th> 
 
       <th>Cost</th> 
 
       <th>Taxes</th> 
 
       <th>Notes</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
       <td class="proce-td"> 
 
        <ul> 
 
         <li> 
 
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting ghj industry.<span><a href="">[+]</a></span> 
 
          </p> 
 
         </li> 
 
        </ul> 
 
       </td> 
 
       <td class="cost-td">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td> 
 
       <td class="taxes-td">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td> 
 
       <td> 
 
        <div class="note-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 
 
        <i class="material-icons close-icon2">close</i> 
 
        <i class="material-icons edit-icon">edit</i> 
 
       </td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

Answer 1

你可以使用近距离图标。它应该从打开 - >关闭 - >打开 使用jquery触发事件打开（appendChild或insertAfter）并关闭（removeChild或简单地删除）。

jQuery(document).ready(function() { 
 
    jQuery("#plus").click(function() { 
 
     $("#main").append('<tr><td>A</td><td>B</td><td>C</td><td>D</td><td></td></tr>'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1" id="main"> 
 
<tr> 
 
    <td>A</td> 
 
    <td>B</td> 
 
    <td>C</td> 
 
    <td>D</td> 
 
    <td><a href="#" id="plus">[+]</a></td> 
 
</tr> 
 
</table>

Answer 2

你想这样吗？

jQuery(document).ready(function() { 
 
\t jQuery(".arrow_btn").click(function() { 
 
\t \t var accor_id = jQuery(this).closest('tr').next('tr').attr("id"); 
 
\t \t var accor_elm = ''; 
 
\t \t accor_elm = "#"+accor_id; 
 
\t \t if (jQuery(accor_elm).is(':visible')) { 
 
\t \t \t jQuery(accor_elm).hide('300'); 
 
\t \t } else { 
 
\t \t \t jQuery(accor_elm).toggle('slow'); 
 
\t \t \t jQuery(".accrdn_class").not(accor_elm).hide('300'); 
 
\t \t } 
 
\t }); \t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table"> 
 
<thead> 
 
\t <tr class=""> 
 
\t \t <th>Procedure Name</th> 
 
     <th>Cost</th> 
 
     <th>Taxes</th> 
 
     <th>Notes</th> 
 
\t </tr> 
 
</thead> 
 

 
<tr class="all_con_area"> 
 
\t <td class="arrow_btn">Tester</td> 
 
\t <td class="arrow_btn">Test</td> 
 
\t <td class="arrow_btn"> Design</td> \t \t \t \t \t \t \t \t \t 
 
\t <td class="arrow_img "><a href="#" class="arrow_btn">[+]</a></td> 
 
</tr> 
 
<tr id="satisfication_1" class="accrdn_class" style="display: table-row;"> \t 
 
\t <td colspan="5" class="temonial_cont"><div class="row head_inner_page"> \t \t \t 
 
\t \t <div class="col-md-4 col-sm-4 col-xs-12"> 
 
\t \t \t <table class="table inner_page_table"> 
 
\t   \t <tbody> 
 
\t \t   \t <tr> 
 
\t \t   \t \t <td><p><span>Client Name<span style="float:right;">:&nbsp;&nbsp;</span></span></p></td> 
 
\t \t   \t \t <td ><p>tester</p></td> 
 
\t \t   \t </tr> 
 
\t \t   \t <tr> 
 
\t \t   \t \t <td ><p><span>Company Name<span style="float:right;">:&nbsp;&nbsp;</span></span></p></td> 
 
\t \t   \t \t <td ><p>Test</p></td> 
 
\t \t   \t </tr> 
 
\t \t   \t <tr> 
 
\t \t   \t \t <td ><p><span>Project City<span style="float:right;">:&nbsp;&nbsp;</span></span></p></td> 
 
\t \t   \t \t <td ><p></p></td> 
 
\t \t   \t </tr> 
 
\t \t   \t <tr> 
 
\t \t   \t \t <td ><p><span>Project Name<span style="float:right;">:&nbsp;&nbsp;</span></span></p></td> 
 
\t \t   \t \t <td ><p>Test</p></td> 
 
\t \t   \t </tr> 
 
\t   \t </tbody> 
 
\t   \t </table> 
 
\t \t </div> 
 
\t 
 
    </td> 
 
</tr> 
 
</table>