WebAPI(part10)--动态生成表格
生活随笔
收集整理的這篇文章主要介紹了
WebAPI(part10)--动态生成表格
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
學(xué)習(xí)筆記，僅供參考，有錯必究
文章目錄
- 動態(tài)生成表格
動態(tài)生成表格
從本地取到數(shù)據(jù)，動態(tài)生成表格，并添加刪除操作.
代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><meta name="description" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href=""></head><body><table cellspacing="0"><tr><th>姓名</th><th>科目</th><th>成績</th><th>操作</th></tr></table><script>var dataset = [{name: '羊羊',subject: '數(shù)據(jù)科學(xué)',score: 99},{name: '豬豬',subject: '統(tǒng)計學(xué)',score: 95},{name: '貓貓',subject: '最優(yōu)化',score: 100},{name: '狗崽子',subject: '可視化',score: 59},];// 獲取tbodyvar tbody = document.querySelector("tbody");for(var i = 0; i < dataset.length; i++) {// 創(chuàng)建 tr 標(biāo)簽(行)var tr = document.createElement("tr");tbody.appendChild(tr);// 在行里創(chuàng)建單元格 tdfor (var k in dataset[i]) {var td = document.createElement("td");td.innerHTML = dataset[i][k];tr.appendChild(td);}// 創(chuàng)建刪除單元格var td = document.createElement("td");td.innerHTML = '<a href="javascript:;">' + '刪除' + '</a>';tr.appendChild(td);}// 刪除操作var as = document.querySelectorAll ('a');for(var i=0; i < as.length; i++) {as[i].onclick = function() {tbody.removeChild(this.parentNode.parentNode);}}</script></body> </html>結(jié)果展示：
總結(jié)
以上是生活随笔為你收集整理的WebAPI(part10)--动态生成表格的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [css]画圆形标签
- 下一篇： 魔兽世界怀旧服幽暗城位置在哪 幽暗城位置