javascript案例,动态添加和删除表格行

最新推荐文章于 2024-08-08 16:36:35 发布

程宇寒

最新推荐文章于 2024-08-08 16:36:35 发布

阅读量1.1k

点赞数

文章标签： javascript案例动态添加和删除表格行

本文链接：https://blog.csdn.net/czh500/article/details/84946584

版权

javascript案例,动态添加和删除表格行

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript案例,动态添加和删除表格行,雪豹软件工作室</title>
<link rel="stylesheet" type="text/css" href="body.css">
<link rel="stylesheet" type="text/css" href="input2.css">
<link rel="stylesheet" type="text/css" href="mark.css">
<style type="text/css">
table {
    margin-right: auto;
    margin-left: auto;
    margin: auto;
}
</style>

<script type="text/javascript">
	var count = 0;//序号
function saveInfo(){
	count++;//每次序号自动加1
	var tableNode = document.getElementById("testTable");
	var trNode = document.createElement("tr");
	//可以使用dom方式,也可以使用innerHTML方式，以下，我2种方式都写了，dom方式我已经注释掉了，如果要用dom方式的话，解注释就可以了
	/* 
	var thNode1 = document.createElement("th");
	var thNode2 = document.createElement("th");
	var thNode3 = document.createElement("th");
	var thNode4 = document.createElement("th"); 
	*/
	
	/* 
	var userName_textNode = document.createTextNode(document.getElementById("userName").value);
	var password_textNode = document.createTextNode(document.getElementById("password").value); 
	*/
	
	var userName_Value = document.getElementById("userName").value;
	var password_Value = document.getElementById("password").value;
	
	/* 
	var aNode = document.createElement("A");
	aNode.href = "#";
	aNode.onclick = deleteMe;
	aNode.title = "我是第" + count + "行，点我可以删除本行";
	var delete_textNode = document.createTextNode("删除"); 
	*/
	
	/* 
	aNode.appendChild(delete_textNode);
	thNode1.appendChild(document.createTextNode(count));
	thNode2.appendChild(userName_textNode);
	thNode3.appendChild(password_textNode);
	thNode4.appendChild(aNode);
	trNode.appendChild(thNode1);
	trNode.appendChild(thNode2);
	trNode.appendChild(thNode3);
	trNode.appendChild(thNode4); 
	*/
	
	var aNodeInfo = '<a href="#" onclick="deleteMe2(this)" title="我是第' + count + '行，点我可以删除本行">删除</a>';
	var checkboxNodeInfo = '<input type="checkbox" name="id" value="'  + count + '">';
	var tdNode = "<td>" + checkboxNodeInfo + count +"</td><td>" + userName_Value + "</td><td>" + password_Value + "</td><td>" + aNodeInfo + "</td>";
	//alert(tdNode);
	trNode.innerHTML = tdNode;
	tableNode.appendChild(trNode);
}
	
	
	function deleteMe() {
		//alert(this);
		//alert("deleteMe");
		var myTr = this.parentNode.parentNode;
		// this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
		var isSure = confirm("您确定要删除序号为" + myTr.firstChild.firstChild.nodeValue
				+ "的数据吗？");
		if (isSure) {
			myTr.parentNode.removeChild(myTr);
		}
	}
	
	function deleteMe2(obj) {
		//alert(obj.nodeName);
		var myTr = obj.parentNode.parentNode;
		var isSure = confirm("您确定要删除序号为" + myTr.firstChild.firstChild.nodeValue
				+ "的数据吗？");
		if (isSure) {
			myTr.parentNode.removeChild(myTr);
		}
	}
</script>
</head>
<body>
	<table class="myTable" style="width:50%;">
		<tr>
			<td>用户名:</td>
			<td><input type="text"  value="江西省赣州市于都县" id="userName"></td>
			<td><div id="errorUserName"></div></td>
		</tr>
		<tr>
			<td>密码:</td>
			<td><input type="password" value="于都县" id="password"></td>
			<td><div id="errorPassword"></div></td>
		</tr>
		<tr>
			<td colspan="3">
			<input type="button" value="注册" onclick="saveInfo()">
			<input type="reset" value="删除">
			</td>
		</tr>
	</table>
	<br>
	<table class="myTable" id="testTable">
	<tr>
	<th><input type="checkbox" name="id" value="all">序号</th>
	<th>用户名</th>
	<th>密码</th>
	<th>操作</th>
	</tr>
	</table>
</body>
</html>