JavaScript實(shí)現(xiàn)動態(tài)加載刪除表格
更新時(shí)間：2021年04月11日 15:21:36 作者：KathyLJQ
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)動態(tài)加載刪除表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)動態(tài)加載刪除表格的具體代碼，供大家參考，具體內(nè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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js簡單實(shí)現(xiàn)讓文本框內(nèi)容逐個(gè)字的顯示出來
逐個(gè)字顯示效果就像是打印機(jī)一樣，在某些情況下起到強(qiáng)調(diào)作用，下面有個(gè)不錯(cuò)的示例，大家可以學(xué)習(xí)下2013-10-10
這篇文章主要介紹了javascript中Object使用詳解，非常全面詳盡，有需要的小伙伴參考下2015-01-01
JS中IP地址與整數(shù)相互轉(zhuǎn)換的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS中IP地址與整數(shù)相互轉(zhuǎn)換的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-04-04
Bootstrap布局之柵格系統(tǒng)學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了Bootstrap布局之柵格系統(tǒng)的學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
鑒于網(wǎng)上找到的幾個(gè)日期選擇程序有些問題，遂著手重寫一個(gè)程序，添加了時(shí)間選擇功能，截圖及源碼如下，有需要的朋友可以參考下2013-08-08
這篇文章主要介紹了layui導(dǎo)航欄二級菜單不顯示問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
詳解JavaScript中if語句優(yōu)化和部分語法糖小技巧推薦
在前端日常開發(fā)過程中，if?else判斷語句使用的次數(shù)應(yīng)該是比較頻繁的了，一些較為復(fù)雜的場景，可能會用到很多判斷，本文給大家介紹JavaScript中if語句優(yōu)化和部分語法糖小技巧，感興趣的朋友一起看看吧2022-05-05
javascript數(shù)組對象常用api函數(shù)小結(jié)(連接,插入,刪除,反轉(zhuǎn),排序等)
這篇文章主要介紹了javascript數(shù)組對象常用api函數(shù),結(jié)合實(shí)例形式總結(jié)分析了javascript針對數(shù)組的連接、刪除、反轉(zhuǎn)、排序、插入等操作相關(guān)函數(shù)用法,需要的朋友可以參考下2016-09-09
Bootstrap開發(fā)中Tab標(biāo)簽頁切換圖表顯示問題的解決方法
這篇文章主要給大家介紹了關(guān)于Bootstrap開發(fā)中Tab標(biāo)簽頁切換圖表顯示問題的解決方法，文中通過圖文以及示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
這篇文章主要給大家介紹了關(guān)于js中的深淺拷貝問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05