动态创建表格

最新推荐文章于 2025-08-04 22:34:32 发布

二八哥

最新推荐文章于 2025-08-04 22:34:32 发布

阅读量428

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42103706/article/details/84137662

本文介绍了一种使用JavaScript动态创建HTML表格的方法，并演示了如何从JSON数据中填充表格内容及添加操作按钮实现行数据的删除功能。

<!DOCTYPE HTML>
<html>
<head>
<title>动态创建表格</title>
<meta charset="utf-8" />
<style>
	table{width:600px; border-collapse:collapse;
		text-align:center;
	}
  td,th{border:1px solid #ccc}
  thead td{
    font-size:35px;
    font-weight: bold; 
  }
</style>

</head>
<body>
	<div id="data"></div>
  <script>
	var json=[
    {"ename":"Tom", "salary":11000, "age":25},
    {"ename":"John", "salary":13000, "age":28},
    {"ename":"Mary", "salary":12000, "age":25}
  ];
  //创建空table元素
  var table=document.createElement("table");
  document.getElementById("data").appendChild(table);
  //创建thead并添加到table下
  var thead=table.createTHead();
  //创建tr并添加到thead下
  var tr=thead.insertRow();
  for (var key in json[0]){
    tr.insertCell().innerHTML=key;
  }
  tr.insertCell().innerHTML="操作";
  var tbody=table.createTBody();
  for (var i of json){
    //在tbody下添加tr
    console.log(i);
    var tr=tbody.insertRow();
    //在tr下添加td,并添加内容
    for (var key in i){
      tr.insertCell().innerHTML=i[key];
      console.log(key)
    }
    //创建buuton按钮
    var btn=document.createElement("button");
    btn.innerHTML="删除";
    //点击button触发删除
    table.onclick=function(e){
      if(e.target.nodeName==="BUTTON"){}
      var btn=e.target;//this---->btn
      var tr=btn.parentNode.parentNode;
      var ename=tr.cells[0].innerHTML;//获取tr下标为0的内容
      //如果confirm返回true删除
      if(confirm("是否继续删除"+ename+"?")){
        //删除触发的button按钮的整行
        table.deleteRow(tr.rowIndex);
      } 
    }
    //创建td,并把button添加到td下
    tr.insertCell().appendChild(btn);
  }

  </script>
</body>
</html>

效果:
在这里插入图片描述