1.  以下这个案例比较典型：

        涉及到dom节点的操作，以及数组和对象的遍历方法

题目要求：

• 使用数组把学生数据模拟出来。
• 动态创建行、单元格。
• 为单元格填充数据。
• 提供“删除”链接，可删除所在的行。

效果如下：

 html代码部分如下：

   <table><thead><tr><td>姓名</td><td>科目</td><td>成绩</td><td>操作</td></tr></thead><tbody></tbody></table>

js代码块：

        //定义数组对象保存数据let arr = [{name: 'Tom',subject: 'JavaScript',score: '100'},{name: 'Jack',subject: 'JavaScript',score: '91'},{name: 'Tony',subject: 'JavaScript',score: '99'}];//获取tbodylet tbody = document.querySelector('tbody');for (let i = 0; i < arr.length; i++) {//遍历数组let mytr = document.createElement('tr');//创建行节点tbody.appendChild(mytr);//添加行节点for (let j in arr[i]) {//for..in 遍历对象，获取其属性值let td = document.createElement('td');//创建单元格节点td.innerHTML = arr[i][j] // 将属性值添加至td中mytr.appendChild(td)//添加单元格节点};// 创建操作单元格节点let td_delete = document.createElement('td');td_delete.innerHTML = '<a href="javscript:;">删除</a>'//屏蔽掉a的href跳转功能mytr.appendChild(td_delete);//添加至每一行};//获取所有a标签节点let a_arr = document.querySelectorAll('a');for (let i = 0; i < a_arr.length; i++) {//遍历所有节点a_arr[i].addEventListener('click', function () {//通过父节点tbody来删除它的子节点tbody.removeChild(this.parentNode.parentNode)});};</script>

页面输出结果如文章开头效果图

使用操作列单元格删除后得到如下表格