javascript - 如何在单击时打开 tr 内的表 tr

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(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>