JavaScript實現(xiàn)動態(tài)加載刪除表格
更新時間：2021年04月11日 15:21:36 作者：KathyLJQ
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)動態(tài)加載刪除表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)動態(tài)加載刪除表格的具體代碼，供大家參考，具體內容如下
代碼：
<!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>Document</title>
<style>
table {
margin: 100px auto;
width: 500px;
border-collapse: collapse;
}
th {
border: 1px solid gray;
background-color: lightgray;
height: 30px;
}
td {
text-align: center;
border: 1px solid gray;
}
</style>
</head>
<body>
<table>
<thead>
<th>姓名</th>
<th>科目</th>
<th>成績</th>
<th>操作</th>
</thead>
<tbody>
</tbody>
</table>
<script>
var tbd = document.querySelector('tbody');
var info = [{
name: 'kathy',
subject: "javascript",
score: 60
}, {
name: 'Milla',
subject: "java",
score: 100
}, {
name: 'kiki',
subject: "python",
score: 80
}, {
name: 'linda',
subject: "jquery",
score: 70
}]
var info_list = [];
for (var i = 0; i < info.length; i++) {
console.log(info[i]['subject']);
var str = "<tr><td>" + info[i]['name'] + "</td>" + "<td>" + info[i]['subject'] + "</td>" + "<td>" + info[i]['score'] + "</td>" + "<td><a href = javascript:;>刪除</a></td>" + "</tr>";
info_list.push(str);
}
tbd.innerHTML = info_list.join('');
var deletes = document.querySelectorAll('a');
for (var i = 0; i < deletes.length; i++) {
deletes[i].onclick = function() {
tbd.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
逐個字顯示效果就像是打印機一樣，在某些情況下起到強調作用，下面有個不錯的示例，大家可以學習下2013-10-10
這篇文章主要介紹了javascript中Object使用詳解，非常全面詳盡，有需要的小伙伴參考下2015-01-01
JS中IP地址與整數(shù)相互轉換的實現(xiàn)代碼
這篇文章主要介紹了JS中IP地址與整數(shù)相互轉換的實現(xiàn)代碼,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細介紹了Bootstrap布局之柵格系統(tǒng)的學習筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
鑒于網上找到的幾個日期選擇程序有些問題，遂著手重寫一個程序，添加了時間選擇功能，截圖及源碼如下，有需要的朋友可以參考下2013-08-08
這篇文章主要介紹了layui導航欄二級菜單不顯示問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
詳解JavaScript中if語句優(yōu)化和部分語法糖小技巧推薦
在前端日常開發(fā)過程中，if?else判斷語句使用的次數(shù)應該是比較頻繁的了，一些較為復雜的場景，可能會用到很多判斷，本文給大家介紹JavaScript中if語句優(yōu)化和部分語法糖小技巧，感興趣的朋友一起看看吧2022-05-05
javascript數(shù)組對象常用api函數(shù)小結(連接,插入,刪除,反轉,排序等)
這篇文章主要介紹了javascript數(shù)組對象常用api函數(shù),結合實例形式總結分析了javascript針對數(shù)組的連接、刪除、反轉、排序、插入等操作相關函數(shù)用法,需要的朋友可以參考下2016-09-09
Bootstrap開發(fā)中Tab標簽頁切換圖表顯示問題的解決方法
這篇文章主要給大家介紹了關于Bootstrap開發(fā)中Tab標簽頁切換圖表顯示問題的解決方法，文中通過圖文以及示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-07-07
這篇文章主要給大家介紹了關于js中的深淺拷貝問題的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05