js簡單實現(xiàn)自動生成表格功能示例

更新時間：2020年06月02日 08:51:44 作者：不摸魚

這篇文章主要介紹了js簡單實現(xiàn)自動生成表格功能,結合實例形式分析了JavaScript針對數(shù)組元素遍歷與頁面元素動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了js簡單實現(xiàn)自動生成表格功能。分享給大家供大家參考，具體如下：

JS實現(xiàn)自動生成表格

由于自己的算法8太行，所以只能盡量用簡單點的方法實現(xiàn)效果

下面直接上代碼

 <table id="table">
 <thead>
  <td>姓名</td>
  <td>年齡</td>
  <td>身高</td>
 </thead>
 <tbody></tbody>
 </table>

 <style>
 .del{
  cursor: pointer;
  color: blue;
 }
 </style>

<script>
 var tableInfo = [
  { 姓名: '張三', 年齡: 20, 身高: 160 },
  { 姓名: '李四', 年齡: 18, 身高: 158 },
  { 姓名: '王二麻子', 年齡: 19, 身高: 180 },
  { 姓名: '孫悟空', 年齡: 100, 身高: 150 },
  { 姓名: '豬八戒', 年齡: 100, 身高: 155 },
  { 姓名: '龜龜', 年齡: 200, 身高: 0.5 }
 ]
  var tr = document.createElement('tr');
  var tdName = document.createElement('td');
  var tdAge = document.createElement('td');
  var tdTall = document.createElement('td');
  var del = document.createElement('span');

  //td賦值為對應的表格信息
  tdName.innerHTML = tableInfo[i].姓名;
  tdAge.innerHTML = tableInfo[i].年齡;
  tdTall.innerHTML = tableInfo[i].身高;
  //設置刪除按鈕
  del.innerHTML = '刪除';
  del.className = 'del';
  //調用創(chuàng)建函數(shù)
  createAll(tdName, tdAge, tdTall);

 }
 //創(chuàng)建tr>td 和刪除按鈕
 function createAll(tdName, tdAge, tdTall) {
  table.appendChild(tr);
  tr.appendChild(tdName);
  tr.appendChild(tdAge);
  tr.appendChild(tdTall);
  tr.appendChild(del);
 }
 //設置刪除按鈕的點擊事件
 var btnDel = document.getElementsByClassName('del');
 for (var i = 0; i < btnDel.length; i++) {
  btnDel[i].onclick = function () {
  //找到刪除鍵的父節(jié)點(tr)并移除
  this.parentNode.remove();
  }
 }
 </script>

代碼效果：