最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

js向table表格动态增加行删除行案例

JS/CSS 太平洋学习网 浏览 评论

js向table表格动态增加行,删除行经常被用到,一般用于数据的批量添加和批量删除,本案例采用原生的JavaScript来实现,css样式自己设计,效果如图。

js动态表格

下面是js实现表格动态增加行,删除行的html和js代码,直接复制过去就可以使用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>作业-动态表格</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<style type="text/css">
		#list tr th {
			background-color: #06F;
		}
</style>
	</head>

	<body>
		<table id="list" border="1" align="center" width="500px">
			<thead>
				<tr>
					<th>
						<input type="checkbox" id="all" onclick="checkAll(this)" />
					</th>
					<th>编号</th>
					<th>姓名</th>
					<th>密码</th>
					<th>年龄</th>
					<th>地址</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="7">
						<a href="javascript:void(0)" onclick="delSelect()">删除选择</a>
					</td>
				</tr>
			</tfoot>
		</table>
		<hr />
		<form method="post" action="addUser.action">
			<table border="1" align="center" width="300px">
				<tr>
					<th>编号</th>
					<td>
						<input type="text" id="id" />
					</td>
				</tr>
				<tr>
					<th>姓名
					</th>
					<td>
						<input type="text" id="name" />
					</td>
				</tr>
				<tr>
					<th>密码</th>
					<td>
						<input type="text" id="password" />
					</td>
				</tr>
				<tr>
					<th>年龄</th>
					<td>
						<input type="text" id="age" />
					</td>
				</tr>
				<tr>
					<th>住址</th>
					<td>
						<input type="text" id="address" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="reset" value="重置" />
						<input type="button" value="添加" onclick="addItem()" />
					</td>
				</tr>
			</table>
		</form>
	</body>
	<script type="text/javascript">
	/*
		<tr>
			<td><input type="checkbox" name="sub"/></td>
			<td>1</td>
			<td>1</td>
			<td>1</td>
			<td>1</td>
			<td>1</td>
			<td>删除</td>
		</tr>
	*/
	// 1. 添加一行
	function addItem(){
		//1.1 获取输入数据
		var id = document.getElementById("id").value;
		var name = document.getElementById("name").value;
		var pwd = document.getElementById("password").value;
		var age = document.getElementById("age").value;
		var address = document.getElementById("address").value;
		
		
		//1.2 把输入数据添加到表格中: 创建新的一行、设置值、且添加!
		//1.2.1 创建节点
		var tr = document.createElement("tr");
		var td_cbx = document.createElement("td");
		var td_id = document.createElement("td");
		var td_name = document.createElement("td");
		var td_pwd = document.createElement("td");
		var td_age = document.createElement("td");
		var td_address = document.createElement("td");
		var td_op = document.createElement("td");
		
		// 设置值
		td_cbx.innerHTML = "<input type=\"checkbox\" name=\"sub\" />";
		td_id.innerHTML = id;
		td_name.innerHTML = name;
		td_pwd.innerHTML = pwd;
		td_age.innerHTML = age;
		td_address.innerHTML = address;
		td_op.innerHTML = "<a href=\"#\" onclick=\"deleteOne(this)\">删除</a>";
		
		//1.2.2 处理节点关系
		tr.appendChild(td_cbx);
		tr.appendChild(td_id);
		tr.appendChild(td_name);
		tr.appendChild(td_pwd);
		tr.appendChild(td_age);
		tr.appendChild(td_address);
		tr.appendChild(td_op);
		
		//1.2.3 添加到tobody中
		document.getElementsByTagName("tbody")[0].appendChild(tr);
		
	}
	
	//2. 删除一行
	function deleteOne(obj_a){
	/*
		//2.1 找到要删除的行
		var deletRow = obj_a.parentNode.parentNode;
		
		//2.2 找到tbody, 删除上面的行
		//a. 根据标签获取
		//var tbody = document.getElementsByTagName("tbody")[0];
		//b. 根据节点关系查找
		var tbody = deletRow.parentNode;
		
		// 删除
		tbody.removeChild(deletRow);
		*/
		
		// 超链接标签的父标签(td),父标签(tr),父标签(tbody) 删除一行即<tr>内的
		obj_a.parentNode.parentNode.parentNode.removeChild(obj_a.parentNode.parentNode);
	}
	
	//3. 全选
	function checkAll(obj){
		// 获取父复选框
		// var all = document.getElementById("all");
		var all = obj;
		
		// 获取所有的自复选框
		var sub = document.getElementsByName("sub");
		// 遍历
		for (var i=0;i<sub.length;i++){
			sub[i].checked = all.checked; // 子复选框状态,与父复选框状态一致
		}
	}
	//4. 删除选择
	function delSelect(){
		//4.1 获取toby
		var tbody = document.getElementsByTagName("tbody")[0];
		
		//4.2 获取所有子复选框
		var sub = document.getElementsByName("sub");
		
		//4.3 迭代
		for (var i=0;i<sub.length;i++){
			if (sub[i].checked){
				tbody.removeChild( sub[i].parentNode.parentNode );
				i--;
			}
		}
		
	}
	</script>
	
</html>



来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/js_css/2017/0626/122.html

    与本文相关的文章

    发表我的评论
    取消评论

    表情

    您的回复是我们的动力!

    • 昵称 (必填)

    网友最新评论