JavaScript實現動態表格的方法詳解
阿新 • • 發佈：2022-01-24
目錄
- 實現動態表格
- 基本效果如下
- 程式碼如下：
- 第一種方式（較簡單，建議使用）
- 方式二
- 改進版
- 程式碼如下：
- 總結
Script實現動態表格
（改建版，程式碼見最下面）
基本效果如下
點選新增，可以將輸入框中的值，新增到表格中；點選刪除可以刪除本行內容。
程式碼如下：
第一種方式（較簡單，建議使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態表格02</title>
<style>
table{
bowww.cppcns.com 簡單解釋
刪除的事件繫結在table表格中，注意看！
方式二
只需要在上述基礎上，修改
<script>
//給新增按鈕繫結事件
var element = document.getElementById("btn_add");
element.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");
var td_name = document.createElement("td");
var td_gender = document.createElement("td");
var td_a = document.createElement("td");
var ele_a=document.createElement("a");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
var name_id = document.createTextNode(name);
td_name.appendChild(name_id);
var gender_id = document.createTextNode(gender);
td_gender.appendChild(gender_id);
//設定屬性值
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
簡單解釋
改進版
又加了一些新功能：滑鼠懸停變色，全選，全不選，反選。
效果：框框可以選中，可以全選，可以全不選，可以反選。
程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態表格02</title>
<style>
table{
border: 1px solid;
margin: 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="請輸入id值">
<input type="text" id="name" placeholder="請輸入姓名">
<input type="text" id="gender" placeholder="請輸入性別">
<input type="button" id="btn_add" value="新增">
</div>
<table>
<caption>學生資訊表</caption>
<tr>
<th><input type="checkbox" name="cb" id="firstCb"></th>
<th>id號</th>
<th>姓名</th>
<th>性別</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="cb" ></td>
<td>001</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>002</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>003</td>
<td>永PTvsPOxKFk琪</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb" ></td>
<td>004</td>
<td>爾康</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
</tr>
</table>
<div>
<input type="button" id="selectAll" value="全選">
<input type="button" id="unSelectAll" value="全不選">
<input type="button" id="selectRev" value="反選">
</div>
<script>
//使用innerHTML給新增按鈕繫結事件
var element = dhttp://www.cppcns.comocument.getElementById("btn_add");
element.onclick=function(){
//獲取文字框中的內容
var id = document.getElementById("id").value;
var name=document.getElementById("name").value;
var gender=document.getElementById("gender").value;
//獲取table
var table=document.getElementsByTagName("table")[0];
//新增一行
table.innerHTML+="<tr>"+"<td><input type=\"checkbox\" name=\"cb\" ></td>"+"<td>"+id+"</td><td>"+name+"</td><td>"+gender+"</td><td>"
+"<a href=\"javascript:void(0);\" nclick=\"delTr(this);\">刪除</a></td></tr>";
}
//刪除方法
function delTr(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
//給前邊的選不選新增事件
//1.在頁面載入完後繫結事件
window.onload=function(){
//給全選按鈕繫結單擊事件
document.getElementById("selectAll").onclick=function(){
//獲取所有的checkbox
var cbs = document.getElementsByName("cb");
for(var i=0;i<cbs.length;i++){
cbs[i].checked=true;
}
}
//全部選按鈕繫結事件
document.getElementById("unSelectAll").onclick=function(){
var cbs = document.getElementsByName("cb");
for(var i = 0; i < cbs.length; i++){
cbs[i].checked=false;
}
}
//反選按鈕繫結事件
document.getElementById("selectRev").onclick = function(){
//反選
var cbs = document.getElementsByName("cb");
for (var i = 0; i < cbs.length; i++) {
//設定每一個cb的狀態為相反
cbs[i].checked = !cbs[i].checked;
}
}
//第一個的點選事件
document.getElementById("firstCb").onclick = function(){
var cbs = document.getElementsByName("cb");
//alert("被點選了");
//console.log(cbs);
for (var i = 1; i < cbs.length; i++) {
//設定每一個cb的狀態和第一個cb的狀態一樣
cbs[i].checked = this.checked;
}
}
//給所有tr繫結滑鼠移到元素之上和移出元素事件
var trs = document.getElementsByTagName("tr");
//遍歷
for (var i = 0; i < trs.length; i++) {
//移到元素之上
trs[i].onmouseover = function(){
this.className = "over";
}
www.cppcns.com //移出元素
trs[i].onmouseout = function(){
this.className = "out";
}
}
}
</script>
</body>
</html>
總結
最後這個程式碼還有點問題，點選最上邊的框框可以全選或者都不選所有。但是當新增幾行之後，這個功能就實現不了了。
新增幾行之後，滑鼠的懸停變色也不能實現了。
本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!