JS 动态增加删除table

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

iteye_5121

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

阅读量168

点赞数

分类专栏： js 文章标签： js ViewUI

本文链接：https://blog.csdn.net/iteye_5121/article/details/82679078

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>

iteye_5121

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS 动态增加删除table

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;index.html&lt;/title&gt;&lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/scrip
复制链接

扫一扫