Java教程

javascript简单案例-动态表格

本文主要是介绍javascript简单案例-动态表格，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！ 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态表格</title>
		<style>
			table{
				border: 1px solid;
				margin:0 auto; 
				width: 500px;
				
			}
			td,th{
				text-align: center;
				border: 1px solid;
			}
			div{
				text-align: center;
				margin: 50px;
			}
			.out{
				background-color: white;
			}
			.over{
				background-color: pink;
			}
		</style>
	</head>
	<body>
	<div>
		<input type="text" id = "id" placeholder="请输入编号" />
		<input type="text" id="name"  placeholder="请输入姓名">
		<input type="text" id="gender"  placeholder="请输入性别">
	    <input type="button" value="添加" id="btn_add">
	</div>
	<table>
		<caption>学生信息表</caption>
		<tr>
			<th><input type = "checkbox" name = "cb" id="fir" ></th>
			<th>编号</th>
			<th>姓名</th>
			<th>性别</th>
	        <th>操作</th>
		</tr>
		<tr>
			<td><input type = "checkbox" name = "cb"></td>
			<td>1</td>
			<td>马克</td>
			<td>男</td>
			<td><a href = "javascript:void(0);" onclick="delTr(this);">删除</a></td>
		<!-- 这里的方法中的this表示删除该行 ，this在写方法时参数为obj-->
		</tr>
		<tr>
			<td><input type = "checkbox" name = "cb"></td>
			<td>2</td>
			<td>风清扬</td>
			<td>男</td>
			<td><a href = "javascript:void(0);" onclick="delTr(this);">删除</a></td>
		</tr>
		<tr>
			<td><input type = "checkbox" name = "cb"></td>
			<td>3</td>
			<td>童丽</td>
			<td>女</td>
			<td><a href = "javascript:void(0);" onclick="delTr(this);">删除</a></td>
		</tr>
	</table>
	<div>
	<input type="button" value="全选" id = "select_all"/>
	<input type="button" value="反选" id = "select_back" />
	</div>
	<script>
		/* //添加方法一：正常
		document.getElementById("btn_add").onclick = function(){
			//获取文本框内容
			var id = document.getElementById("id").value;
			var name = document.getElementById("name").value;
			var gender = document.getElementById("gender").value;
					
			var td_id = document.createElement("td");
			//获取的内容 需要使用textnode来放
			var text_id = document.createTextNode(id);
			td_id.appendChild(text_id);
			var td_name = document.createElement("td");
			var text_name = document.createTextNode(name);
			td_name.appendChild(text_name);
	        //gender 的 td
			var td_gender = document.createElement("td");
	        var text_gender = document.createTextNode(gender);
	        td_gender.appendChild(text_gender);
			
			var td_a = document.createElement("td");
			var ele_a = document.createElement("a");
			ele_a.setAttribute("href","javascript:void(0);");
			ele_a.setAttribute("onclick","delTr(this);");
			
			var text_a = document.createTextNode("删除");
			ele_a.appendChild(text_a);
			td_a.appendChild(ele_a);
			
			var tr = document.createElement("tr");
			tr.appendChild(td_id);
			tr.appendChild(td_name);
	        tr.appendChild(td_gender);
			tr.appendChild(td_a);
			
			var table = document.getElementsByTagName("table")[0];
			table.appendChild(tr);
		} */
		//在页面加载后开始执行
		window.onload = function(){
			//全选
			document.getElementById("select_all").onclick = function(){
				var s = document.getElementsByName("cb");
				for(var i = 0;i<s.length;i++){
					s[i].checked = true;
					//复选框的属性checked表示是否选中
				}
			}
			//反选
			document.getElementById("select_back").onclick = function(){
				var s = document.getElementsByName("cb");
				for(var i = 0;i<s.length;i++){
					if(s[i].checked){
						s[i].checked = false;
					}
					else{
						s[i].checked = true;
					}
					//复选框的属性checked表示是否选中
				}
			}
			//首框全选
			var s = document.getElementById("fir")
			s.onclick = function(){
				// if(s.checked){
				// 	var m = document.getElementsByName("cb");
				// 	for(var i = 1;i<m.length;i++){
				// 		m[i].checked = true;
				// 	}
				// }
				var m = document.getElementsByName("cb");
				for(var i = 0;i<m.length;i++){
					m[i].checked = s.checked;
				}
			}
			//选中该背景色
			var trs = document.getElementsByTagName("tr");
			for(var i = 0;i<trs.length;i++){
				trs[i].onmouseover = function(){
					this.className = "over";
				}
				trs[i].onmouseout = function(){
					this.className = "out";
				}
			}
			
			//innerhtml方法添加
			document.getElementById("btn_add").onclick = function(){
				//获取文本框内容
				var id = document.getElementById("id").value;
				var name = document.getElementById("name").value;
				var gender = document.getElementById("gender").value;
				var table = document.getElementsByTagName("table")[0];
				table.innerHTML += "<tr>\n"+
				"<td><input type = 'checkbox' name = 'cb'></td>"+
				"<td>"+id+"</td>"+
				"<td>"+name+"</td>\n"+
				"<td>"+gender+"</td>\n"+
				"<td><a href = \"javascript:void(0);\" onclick=\"delTr(this);\">删除</a></td>\n"+
			"</tr>";
			}
			//删除
			function delTr(obj){
				var table = obj.parentNode.parentNode.parentNode;
				var tr = obj.parentNode.parentNode;
			// 用parentNode属性获取父节点
				table.removeChild(tr);
			}
		}
	</script>
	</body>
</html>
这篇关于javascript简单案例-动态表格的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航