JavaScript動態(tài)生成帶刪除行功能的表格
本文實例為大家分享了javascript實現(xiàn)動態(tài)生成表格/刪除行的具體代碼，供大家參考，具體內(nèi)容如下
動態(tài)生成一個帶刪除行功能的表格：
實現(xiàn)思路
1、獲取表格<tbody>元素
2、獲取要填充的數(shù)據(jù)，一般是從數(shù)據(jù)庫取數(shù)據(jù)，也可以自己模擬一組數(shù)據(jù)進行測試，數(shù)據(jù)是以對象的形式存儲的，多行數(shù)據(jù)可以用數(shù)組進行存儲，數(shù)組中每一項均為一個對象
3、①循環(huán)遍歷對象數(shù)組，創(chuàng)建行，
②嵌套一個循環(huán)- - -循環(huán)遍歷對象：
a.根據(jù)屬性創(chuàng)建所需個數(shù)的單元格，
b.并給單元格賦值，
c.然后添加單元格到行中，
③添加一個單元格，并賦值一個a鏈接，文本內(nèi)容- - -“刪除”，將該單元格添加到行
4、添加改行到tbody中
5、獲取所有的 a 元素- - -document.querySelectorAll(‘a(chǎn)')，獲得一個對象數(shù)組
6、循環(huán)遍歷 a 對象數(shù)組，給 a 鏈接綁定點擊事件，添加刪除功能- - -tbody.removeChild(this.parentNode.parentNode);
代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>動態(tài)生成表格</title>
<style>
table {
border: 1px solid pink;
border-collapse: collapse;
}
thead {
background-color: #ddd;
}
</style>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0" align="center" width="600px">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成績</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var tbody = document.querySelector('tbody');
var list = [{
'name': '海綿寶寶',
'subject': 'JavaScript',
'age': 66
}, {
'name': '哆唻愛夢',
'subject': 'JavaScript',
'age': 99
}, {
'name': '史迪仔',
'subject': 'JavaScript',
'age': 60
}, {
'name': '皮卡丘',
'subject': 'JavaScript',
'age': 88
}];
for (var i = 0; i < list.length; i++) {
// 一、創(chuàng)建行
var tr = document.createElement('tr');
// 二、填充數(shù)據(jù)
for (var k in list[i]) {
console.log(list[i][k]);
// 1.創(chuàng)建td單元格
var td = document.createElement('td');
// 單元格填充內(nèi)容
td.innerHTML = list[i][k];
// 2.添加單元格
tr.appendChild(td);
}
// 三、添加刪除鏈接
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;" >刪除</a>';
tr.appendChild(td);
// 四、添加行
tbody.appendChild(tr);
}
// 添加刪除功能
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
tbody.removeChild(this.parentNode.parentNode);
}
}
console.log(tbody.childNodes);
console.log(tbody.children);
</script>
</body>
</html>
頁面效果：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇對layui中表單元素的使用詳解。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
下面小編就為大家?guī)硪黄猨s實現(xiàn)用戶輸入的小寫字母自動轉大寫字母的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
JS移動端/H5同時選擇多張圖片上傳并使用canvas壓縮圖片
這篇文章主要介紹了JS移動端/H5同時選擇多張圖片上傳并使用canvas壓縮圖片,需要的朋友可以參考下2017-06-06
setTimeout與setInterval的區(qū)別淺析
這篇文章主要給大家介紹了關于setTimeout與setInterval區(qū)別的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-03-03
Cropper.js進階之固定寬高圖片裁切實現(xiàn)示例
這篇文章主要為大家介紹了Cropper.js進階之固定寬高圖片裁切實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
一文詳解TypeScript中的內(nèi)置數(shù)據(jù)類型
作為一門類型安全的編程語言，TypeScript?提供了多種內(nèi)置數(shù)據(jù)類型，幫助我們更好地定義和操作數(shù)據(jù)，下面小編就來和大家詳細聊聊這些數(shù)據(jù)類型的相關知識吧2023-06-06
小程序里圖片會顯示不全，這時就應該做相應的處理，使小程序里圖片顯示正確，這篇文章主要介紹了微信小程序實現(xiàn)富文本圖片寬度自適應的方法，感興趣的小伙伴們可以參考一下2019-01-01
這篇文章主要介紹了基于JavaScript實現(xiàn)一個簡單的Vue的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了詳解webpack引用jquery（第三方模塊）的三種辦法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
JavaScript常用數(shù)組去重實戰(zhàn)源碼
本文給大家分享js常用8種數(shù)組去重實戰(zhàn)源碼，針對每種方法通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧2021-07-07