动态创建表格数据

  <input type="button" value="创建">

<style>*{margin: 0;padding: 0;}table{width: 980px;margin: 50px auto;}table,th,tr,td{text-align: center;border: 1px solid #ccc;}</style>

  <script>var heads = ['姓名', '年龄', '性别', '学号', '薪资', '城市', '操作'];var datas = [{name:'欧阳霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'上海'},{name:'令狐霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},{name:'欧阳霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'上海'},{name:'令狐霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},];//heads 数组中的数据是用来创建表头的//datas 数据是用来创建内容中的行的var btn = document.querySelector('input');btn.onclick = function(){// 1.先创建表格var table = document.createElement('table');//然后根据heads 创建表头var fst_tr = document.createElement('tr');// 3.便利数组动态创建thfor (let i = 0; i < heads.length; i++) {var th = document.createElement('th');th.innerText = heads[i];//fst_tr.appendChild(th);}table.appendChild(fst_tr);//根据datas 动态创建主题的trfor (let i = 0; i < datas.length; i++) {// 创建trvar tr  = document.createElement('tr');//创建td（遍历对象）for (key in datas[i]) {var td  = document.createElement('td');//将对象中的属性跟值添加到td中td.innerText = datas[i][key];tr.appendChild(td);}var  last_td = document.createElement('td')last_td.innerHTML = '  <a href="javascript:;">删除</a>';tr.appendChild(last_td);table.appendChild(tr);}document.body.appendChild(table);//实现页面中输入时tr显示背景颜色var trs = document.querySelectorAll('tr:nth-child(n+2)')for (let i = 0; i < trs.length; i++) {trs[i].onmouseover = function(){this.style.background = 'pink';}trs[i].onmouseout = function(){this.style.background = '';}}//模拟删除（就是隐藏一条数据）var alinks = document.querySelectorAll('a');for (let i = 0; i < alinks.length; i++) {alinks[i].onclick = function(){if(confirm('确定要删除吗？')){//找到当前标签的父元素进行隐藏// this.parentNode.parentNode.style.dispaly = 'none';// console.log(this.parentNode);table.removeChild(this.parentNode.parentNode);}else{alert('取消删除');                       }}}}</script>