JavaScript實現(xiàn)動態(tài)表格的方法詳解
更新時間：2022年01月23日 15:49:31 作者：小布丁*
這篇文章主要為大家介紹了JavaScript實現(xiàn)動態(tài)表格的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
JavaScript實現(xiàn)動態(tài)表格
（改建版，代碼見最下面）
基本效果如下
點擊添加，可以將輸入框中的值，新增到表格中；點擊刪除可以刪除本行內(nèi)容。
代碼如下：
第一種方式（較簡單，建議使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態(tài)表格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;
}
</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>id號</th>
<th>姓名</th>
<th>性別</th>
<th>操作</th>
</tr>
<tr>
<td>001</td>
<td>小燕子</td>
<td>女</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
</tr>
<tr>
<td>002</td>
<td>紫薇</td>
<td>女</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
</tr>
<tr>
<td>003</td>
<td>永琪</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
</tr>
<tr>
<td>004</td>
<td>爾康</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
</tr>
</table>
<script>
//使用innerHTML給添加按鈕綁定事件
var element = document.getElementById("btn_add");
element.onclick=function(){
//獲取文本框中的內(nèi)容
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>"+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);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態(tài)表格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;
}
</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>id號</th>
<th>姓名</th>
<th>性別</th>
<th>操作</th>
</tr>
<tr>
<td>001</td>
<td>小燕子</td>
<td>女</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
</tr>
<tr>
<td>002</td>
<td>紫薇</td>
<td>女</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
</tr>
<tr>
<td>003</td>
<td>永琪</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
</tr>
<tr>
<td>004</td>
<td>爾康</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td>
</tr>
</table>
<script>
//使用innerHTML給添加按鈕綁定事件
var element = document.getElementById("btn_add");
element.onclick=function(){
//獲取文本框中的內(nèi)容
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>"+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);
}
</script>
</body>
</html>
簡單解釋
刪除的事件綁定在table表格中，注意看！
方式二
只需要在上述基礎上，修改
<script>
//給添加按鈕綁定事件
var element = document.getElementById("btn_add");
element.onclick=function() {
//獲取文本框的內(nèi)容
var id = document.getElementById("id").value;
var name=document.getElementById("name").value;
var gender=document.getElementById("gender").value;
//在創(chuàng)建一行表格
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 tr = document.createElement("tr");
//添加td到tr中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//獲取table
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
//刪除方法
function delTr(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
簡單解釋
改進版
又加了一些新功能：鼠標懸停變色，全選，全不選，反選。
效果：框框可以選中，可以全選，可以全不選，可以反選。
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態(tài)表格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>永琪</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 = document.getElementById("btn_add");
element.onclick=function(){
//獲取文本框中的內(nèi)容
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的狀態(tài)為相反
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的狀態(tài)和第一個cb的狀態(tài)一樣
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";
}
//移出元素
trs[i].onmouseout = function(){
this.className = "out";
}
}
}
</script>
</body>
</html>
總結(jié)
最后這個代碼還有點問題，點擊最上邊的框框可以全選或者都不選所有。但是當新增幾行之后，這個功能就實現(xiàn)不了了。
新增幾行之后，鼠標的懸停變色也不能實現(xiàn)了。
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內(nèi)容!
相關文章
微信小程序開發(fā)之錄音機 音頻播放 動畫實例 (真機可用)
這篇文章主要介紹了微信小程序開發(fā)之錄音機 音頻播放 動畫實例 (真機可用)，這里整理了詳細的代碼,有需要的小伙伴可以參考下。2016-12-12
本篇文章主要是對js中opener與parent的區(qū)別進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
Pro JavaScript Techniques學習筆記，學習js的朋友可以參考下。2010-12-12
JavaScript 中文轉(zhuǎn)拼音實現(xiàn)代碼 有些bug
在做項目時候遇到一個小小的顯示客戶部門名稱（拼音）的業(yè)務，就是在部門名稱下有相應的拼音，而在現(xiàn)有的數(shù)據(jù)庫中沒有相應字段，并且部門數(shù)量比較多，添加起來比較費時，就想能否在js中實現(xiàn)，在頁面中處理。2010-03-03
這篇文章主要為大家詳細介紹了Bootstrap實現(xiàn)彈出框和提示框效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
JavaScript如何刪除數(shù)組元素(總結(jié)篇)
在JavaScript中,除了Object之外,Array類型恐怕就是最常用的類型了,與其他語言的數(shù)組有著很大的區(qū)別,JavaScript中的Array非常靈活,今天我就來總結(jié)了一下JavaScript中Array刪除的方法,感興趣的朋友跟隨小編一起看看吧2023-12-12
這篇文章主要介紹了javascript異步編程的六種方式總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
JavaScript是一種在Web開發(fā)中經(jīng)常使用的前端動態(tài)腳本技術(shù)。在JavaScript中，有一個很重要的安全性限制，被稱為“Same-Origin Policy”（同源策略）2014-04-04
本想從語言的角度來分析，無奈功力不夠，只能粗淺的嘗試一下，于是稱之管中窺豹，還望大牛指正2011-12-12
這篇文章主要介紹了瀏覽器檢測JS代碼，兼容目前各大主流瀏覽器，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02