当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js简单实现自动生成表格功能示例

js简单实现自动生成表格功能示例

2020年06月23日  | 移动技术网IT编程  | 我要评论

本文实例讲述了js简单实现自动生成表格功能。分享给大家供大家参考，具体如下：

js实现自动生成表格

由于自己的算法8太行，所以只能尽量用简单点的方法实现效果

下面直接上代码

 <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';
  //调用创建函数
  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.getelementsbyclassname('del');
 for (var i = 0; i < btndel.length; i++) {
  btndel[i].onclick = function () {
  //找到删除键的父节点(tr)并移除
  this.parentnode.remove();
  }
 }
 </script>

代码效果：

如果有什么地方做的不够完善，请多多指教

感兴趣的朋友可以使用在线html/css/javascript代码运行工具：测试上述代码运行效果。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网