如何打开 table tr inside tr on click

Question

我有一个 table，我想在单击加号图标时在 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() {
 jQuery(".arrow_btn").click(function() {
  var accor_id = jQuery(this).closest('tr').next('tr').attr("id");
  var accor_elm = '';
  accor_elm = "#"+accor_id;
  if (jQuery(accor_elm).is(':visible')) {
   jQuery(accor_elm).hide('300');
  } else {
   jQuery(accor_elm).toggle('slow');
   jQuery(".accrdn_class").not(accor_elm).hide('300');
  }
 }); 
});

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

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

如何打开 table tr inside tr on click

how to open table tr inside tr on click

html

javascript

css

expand

collapsable