JS 动态增加删除table

本文介绍了一个使用HTML和JavaScript实现的动态表格操作案例,包括添加和删除表格行的功能,并记录了被删除行的状态信息。通过点击按钮,用户可以向表格中添加新行或者删除选中的行,同时将删除的行ID保存到文本框中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html>
<html>
<head>
<title>index.html</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
 
<script language="javascript" type="text/javascript">

	function remberMyCheckbox(id) {
		alert(id);
	}

	function delRow() {
		var checkList=document.getElementsByName("checkboxNm");
	
		//mytable1.deleteRow(mytable1.rows.length - 1);
		var checkedStr="";
		for (var i=checkList.length-1;i>=0;i--) {
			if(checkList[i].checked) {
				if (checkedStr!="") {
					checkedStr+=",";
				}
				checkedStr += checkList[i].id;
				
				//Delete myTable's Row
				myTable.deleteRow(checkList[i].id);
			}
		}
		$("#text1").attr("value",checkedStr);
		
		
		
	}

	function insRow() {
		var allRows = document.getElementById('myTable').rows.length;
		//var x = document.getElementById('myTable').insertRow(0);
		var x = document.getElementById('myTable').insertRow(allRows);
		var w = x.insertCell(0);
		var y = x.insertCell(1);
		var z = x.insertCell(2);
		w.innerHTML = "<input type='checkbox' id='"+allRows+"' name='checkboxNm' />";
		y.innerHTML = "NEW CELL1"+allRows;
		z.innerHTML = "NEW CELL2";
	}

</script>
</head>
<body>

	<input type="button" value="OpenPOP" οnclick="OpenPOP();" />
	<input type="button" οnclick="insRow()" value="addRow">
	<input type="button" οnclick="delRow()" value="delRow">
	<h1>delete myRow</h1>
	<table id="myTable" border="1">
		<tr>
			<td><input type="checkbox" id="0" name="checkboxNm"
				οnclick="remberMyCheckbox(this.id);" /></td>
			<td>Row1 cell0</td>
			<td>Row1 cell2</td>
		</tr>
		<tr>
			<td><input type="checkbox" id="1" name="checkboxNm" /></td>
			<td>Row2 cell1</td>
			<td>Row2 cell2</td>
		</tr>
		<tr>
			<td><input type="checkbox" id="2" name="checkboxNm" /></td>
			<td>Row3 cell2</td>
			<td>Row3 cell2</td>
		</tr>
		<tr>
			<td><input type="checkbox" id="3" name="checkboxNm" /></td>
			<td>Row4 cell3</td>
			<td>Row4 cell4</td>
		</tr>
	</table>
	<br />
<input type="text" id="text1" />

</body>
</html>

 蠢话

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值