JS 动态增加删除table

最新推荐文章于 2022-08-03 23:07:53 发布

原创最新推荐文章于 2022-08-03 23:07:53 发布 · 231 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #ViewUI

js 专栏收录该内容

1 篇文章

订阅专栏

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

<!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" onclick="OpenPOP();" />
	<input type="button" onclick="insRow()" value="addRow">
	<input type="button" onclick="delRow()" value="delRow">
	<h1>delete myRow</h1>
	<table id="myTable" border="1">
		<tr>
			<td><input type="checkbox" id="0" name="checkboxNm"
				onclick="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>