JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格的方法詳解
更新時(shí)間：2022年01月23日 15:49:31 作者：小布丁*
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格
（改建版，代碼見(jiàn)最下面）
基本效果如下
點(diǎn)擊添加，可以將輸入框中的值，新增到表格中；點(diǎn)擊刪除可以刪除本行內(nèi)容。
代碼如下：
第一種方式（較簡(jiǎn)單，建議使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動(dòng)態(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="請(qǐng)輸入id值">
<input type="text" id="name" placeholder="請(qǐng)輸入姓名">
<input type="text" id="gender" placeholder="請(qǐng)輸入性別">
<input type="button" id="btn_add" value="添加">
</div>
<table>
<caption>學(xué)生信息表</caption>
<tr>
<th>id號(hào)</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>動(dòng)態(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="請(qǐng)輸入id值">
<input type="text" id="name" placeholder="請(qǐng)輸入姓名">
<input type="text" id="gender" placeholder="請(qǐng)輸入性別">
<input type="button" id="btn_add" value="添加">
</div>
<table>
<caption>學(xué)生信息表</caption>
<tr>
<th>id號(hào)</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>
簡(jiǎn)單解釋
刪除的事件綁定在table表格中，注意看！
方式二
只需要在上述基礎(chǔ)上，修改
<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);
//設(shè)置屬性值
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>
簡(jiǎn)單解釋
改進(jìn)版
又加了一些新功能：鼠標(biāo)懸停變色，全選，全不選，反選。
效果：框框可以選中，可以全選，可以全不選，可以反選。
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動(dòng)態(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="請(qǐng)輸入id值">
<input type="text" id="name" placeholder="請(qǐng)輸入姓名">
<input type="text" id="gender" placeholder="請(qǐng)輸入性別">
<input type="button" id="btn_add" value="添加">
</div>
<table>
<caption>學(xué)生信息表</caption>
<tr>
<th><input type="checkbox" name="cb" id="firstCb"></th>
<th>id號(hào)</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.在頁(yè)面加載完后綁定事件
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++) {
//設(shè)置每一個(gè)cb的狀態(tài)為相反
cbs[i].checked = !cbs[i].checked;
}
}
//第一個(gè)的點(diǎn)擊事件
document.getElementById("firstCb").onclick = function(){
var cbs = document.getElementsByName("cb");
//alert("被點(diǎn)擊了");
//console.log(cbs);
for (var i = 1; i < cbs.length; i++) {
//設(shè)置每一個(gè)cb的狀態(tài)和第一個(gè)cb的狀態(tài)一樣
cbs[i].checked = this.checked;
}
}
//給所有tr綁定鼠標(biāo)移到元素之上和移出元素事件
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é)
最后這個(gè)代碼還有點(diǎn)問(wèn)題，點(diǎn)擊最上邊的框框可以全選或者都不選所有。但是當(dāng)新增幾行之后，這個(gè)功能就實(shí)現(xiàn)不了了。
新增幾行之后，鼠標(biāo)的懸停變色也不能實(shí)現(xiàn)了。
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
您可能感興趣的文章:
- 原生javaScript做得動(dòng)態(tài)表格(注釋寫(xiě)的很清楚)
- js生成動(dòng)態(tài)表格并為每個(gè)單元格添加單擊事件的方法
- JS實(shí)現(xiàn)動(dòng)態(tài)表格的添加，修改，刪除功能(推薦)
- JavaScript實(shí)現(xiàn)簡(jiǎn)單動(dòng)態(tài)表格
- JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格效果
- JavaScript實(shí)現(xiàn)生成動(dòng)態(tài)表格和動(dòng)態(tài)效果的方法詳解
- java前端javascript生成動(dòng)態(tài)表格示例演示
- JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格的示例代碼
相關(guān)文章
微信小程序開(kāi)發(fā)之錄音機(jī) 音頻播放 動(dòng)畫(huà)實(shí)例 (真機(jī)可用)
這篇文章主要介紹了微信小程序開(kāi)發(fā)之錄音機(jī) 音頻播放 動(dòng)畫(huà)實(shí)例 (真機(jī)可用)，這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。2016-12-12
js中opener與parent的區(qū)別詳細(xì)解析
本篇文章主要是對(duì)js中opener與parent的區(qū)別進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
Pro JavaScript Techniques學(xué)習(xí)筆記
Pro JavaScript Techniques學(xué)習(xí)筆記，學(xué)習(xí)js的朋友可以參考下。2010-12-12
JavaScript 中文轉(zhuǎn)拼音實(shí)現(xiàn)代碼 有些bug
在做項(xiàng)目時(shí)候遇到一個(gè)小小的顯示客戶(hù)部門(mén)名稱(chēng)（拼音）的業(yè)務(wù)，就是在部門(mén)名稱(chēng)下有相應(yīng)的拼音，而在現(xiàn)有的數(shù)據(jù)庫(kù)中沒(méi)有相應(yīng)字段，并且部門(mén)數(shù)量比較多，添加起來(lái)比較費(fèi)時(shí)，就想能否在js中實(shí)現(xiàn)，在頁(yè)面中處理。2010-03-03
Bootstrap實(shí)現(xiàn)提示框和彈出框效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)彈出框和提示框效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
JavaScript如何刪除數(shù)組元素(總結(jié)篇)
在JavaScript中,除了Object之外,Array類(lèi)型恐怕就是最常用的類(lèi)型了,與其他語(yǔ)言的數(shù)組有著很大的區(qū)別,JavaScript中的Array非常靈活,今天我就來(lái)總結(jié)了一下JavaScript中Array刪除的方法,感興趣的朋友跟隨小編一起看看吧2023-12-12
這篇文章主要介紹了javascript異步編程的六種方式總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
JavaScript是一種在Web開(kāi)發(fā)中經(jīng)常使用的前端動(dòng)態(tài)腳本技術(shù)。在JavaScript中，有一個(gè)很重要的安全性限制，被稱(chēng)為“Same-Origin Policy”（同源策略）2014-04-04
本想從語(yǔ)言的角度來(lái)分析，無(wú)奈功力不夠，只能粗淺的嘗試一下，于是稱(chēng)之管中窺豹，還望大牛指正2011-12-12
這篇文章主要介紹了瀏覽器檢測(cè)JS代碼，兼容目前各大主流瀏覽器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02