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

debugcn 发表于 Dev

杰克斯

我有一个动态创建的表。当我单击特定行的更多 (+) 按钮时，我想获得更多详细信息。

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

$('#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);

它只删除相同的父行而不是新的子行

阿布赛义德医学博士

你可以在这里试试这个代码。

说明：当用户单击添加行按钮或元素时，会找到父 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。