JS 动态增加删除table

zkk515

浏览: 49098 次

最近访客更多访客>>

斐斐宝贝

jelly_x

Zora_zyy

xh084011250

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

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