【梅开二度】js简单实现自动生成表格功能

无名

代码
<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.姓名;
  tdAge.innerHTML = tableInfo.年龄;
  tdTall.innerHTML = tableInfo.身高;
  //设置删除按钮
  del.innerHTML = '删除';
  del.className = 'del';
  //调用创建函数
  createAll(tdName, tdAge, tdTall);

}
//创建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.getElementsBy

代码效果：