javascript - 单击添加几行并双击删除添加的行

Question

简介: 我是 JQuery 新手，有一个要求，其中我需要实现单击添加几行并双击删除添加的行的场景。

完整场景: 我在一个页面中有两个表，即顶部父表和下面的子表。 父表中有一些行需要单击或双击。 应用场景: 1)第一个要求是，每次单击父表的任何行时，都应在下面的子表中添加 5 行，即如果第 3 行有 5 次单击，则应在子表中添加总共 25 行 table 。 2)第二个要求是，每次双击父表的任何行时，应删除单击父表行时添加的所有相应行，即，如果双击第 3 行，则双击之前添加的所有 25 行添加对应于行号3，在子表中应删除。

需要帮助来解决同样的问题。

HTML Code:

<div style="overflow: scroll; width: 1455px;height:175px;" class="tree">
		<table class="boldtable" id="packagelisttable" style="width: 100%">

			<caption>
				<b style="font-size: 20px">Package List</b>
			</caption>
			<tr class="tableHeaderRow">
				<th class="columnHeader">Distributable Name</th>
				<th class="columnHeader">Version</th>
				<th class="columnHeader">Modality</th>
				<th class="columnHeader">Machine Name</th>
				<th class="columnHeader">Machine Type</th>
				<th class="columnHeader">Machine Version</th>
				<th class="columnHeader">Machine Version2</th>
		

				<th class="columnHeader">Last Registered By </th>
					<th class="columnHeader">Last Registered On </th>
			</tr>



			<tr class="lightData">
				<td class="columnHeader">Installer1</td>
				<td class="columnHeader">1</td>
				<td class="columnHeader">CT1</td>
				<td class="columnHeader">ABCD</td>
				<td class="columnHeader">Dell</td>
				<td class="columnHeader">1</td>
				<td class="columnHeader">1</td>


				<td class="columnHeader">User </td>
					<td class="columnHeader">11-10-2014 </td>


			</tr>

			<tr class="darkData">
							<td class="columnHeader">Installer2</td>
				<td class="columnHeader">1</td>
				<td class="columnHeader">CT1</td>
				<td class="columnHeader">PQRS</td>
				<td class="columnHeader">Dell</td>
				<td class="columnHeader">1</td>
				<td class="columnHeader">1</td>


				<td class="columnHeader">User </td>
					<td class="columnHeader">14-10-2014 </td>

			</tr>
		</table>



	</div>

</div>

Answer 1

$( "#buttonid" ).click(function() {

//你的代码 });

$( "#buttonid" ).dblclick(function() {

//你的代码 });