javascript簡單案例-動態表格

阿新 • • 發佈：2021-08-11

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