Question

我有一个动态创建的表。当我单击应显示为嵌套行的特定行的更多（+）按钮时，我想获得更多详细信息。

根据我的要求，我可以使用以下代码添加新行。但是问题是，当我单击“隐藏”（-）时，应该删除新行。那不起作用

$('#tableEmpList').delegate('a.addRow', 'click', function () {   
var _Result="<tr><td>New Row</td></tr>"            
var row = $(this).closest('tr'); // get the parent row of the clicked button
 $(_Result).insertAfter(row);     
}

当我使用

$(_Result).Remove(row);

仅删除相同的父行，而不删除新的子行

Answer 1

您可以在此处尝试此代码。

说明：当用户单击“添加行”按钮或元素时，然后在添加元素后找到父tr。然后当用户单击“删除”按钮时，找到父级tr并将其删除。

$('#tableEmpList').on('click', 'a.addRow', function(event) {
  event.preventDefault();
  var _Result="<tr><td>New Row</td></tr>";
  $(this).parents('tr').after(_Result);
  $(this).text('(-)').removeClass('addRow').addClass('removeRow');
});
$('#tableEmpList').on('click', 'a.removeRow', function(event) {
  event.preventDefault();
  $(this).parents('tr').next('tr').remove();
  $(this).text('(+)').addClass('addRow').removeClass('removeRow');
});

a {
text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableEmpList">
	<tr>
		<td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magn
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#" class="addRow">(+)</a></p></td>
	</tr>

	<tr>
		<td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magn
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#" class="addRow">(+)</a></p></td>
	</tr>
	<tr>
		<td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magn
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#" class="addRow">(+)</a></p></td>
	</tr>
</table>

当我单击同一父行时，如何添加/删除显示其父行详细信息的新行？

1 个答案: