WebAPI(part10)--动态生成表格
生活随笔
收集整理的這篇文章主要介紹了
WebAPI(part10)--动态生成表格
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
學習筆記，僅供參考，有錯必究
文章目錄
- 動態生成表格
動態生成表格
從本地取到數據，動態生成表格，并添加刪除操作.
代碼：
<!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: '數據科學',score: 99},{name: '豬豬',subject: '統計學',score: 95},{name: '貓貓',subject: '最優化',score: 100},{name: '狗崽子',subject: '可視化',score: 59},];// 獲取tbodyvar tbody = document.querySelector("tbody");for(var i = 0; i < dataset.length; i++) {// 創建 tr 標簽(行)var tr = document.createElement("tr");tbody.appendChild(tr);// 在行里創建單元格 tdfor (var k in dataset[i]) {var td = document.createElement("td");td.innerHTML = dataset[i][k];tr.appendChild(td);}// 創建刪除單元格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>結果展示：
總結
以上是生活随笔為你收集整理的WebAPI(part10)--动态生成表格的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [css]画圆形标签
- 下一篇： WebAPI(part11)--DOM重