案例:动态生成表格
<script> // 1. 先准备好学生的数据 var datas = [{ name: '张三', subject: 'JavaScript', score: 100 }, { name: '李四', subject: 'JavaScript', score: 98 }, { name: '王五', subject: 'JavaScript', score: 99 }, { name: '赵六', subject: 'JavaScript', score: 88 }]; // 2. 往tbody里面创建行:有几个人(通过数组的长度)就创建几行 var tbody = document.querySelector('tbody'); for (var i = 0; i < datas.length; i++) { // 外面的for循环管行tr // 创建tr行 var tr = document.createElement('tr'); tbody.appendChild(tr); // 行里面创建单元格td,单元格的数量取决于每个对象里面的属性个数,for循环遍历对象datas[i] for (var k in datas[i]) { // 里面的for循环管列td // 创建单元格 var td = document.createElement('td'); // 把对象里面的属性值data[i][k]给td td.innerHTML = data[i][k]; tr.appendChild(td); } // 3. 创建有删除2个字的单元格 var td = document.createElement('td'); td.innerHTML = '<a href="javascript:;">删除</a>'; tr.appendChild(td); } // 4. 删除操作开始 var as = document.querySelectorAll('a'); for (var i = 0; i < as.length; i++) { as[i].onclick = function() { // 点击a,删除当前a所在的行(链接的父元素的父元素) tbody.removeChild(this.parentNode.parentNode); } } </script>