JS节点操作 ????（表格在js中添加行和单元格，并有一个删除键）

 1 <div id="div"> 2 ????<table id="tab"> 3 ????????<tr> 4 ????????????<th>编号</th> 5 ????????????<th>姓名</th> 6 ????????????<th>性别</th> 7 ????????????<th>年龄</th> 8 ????????</tr> 9 ????</table>10 </div>

window.onload = function(){ ???var data = [ ???????[1,"王保利","男","10"], ???????[2,"向兆泽","男","11"], ???????[3,"李清坤","男","12"], ???????[4,"陈鹏","男","33"] ???]; ???//初始化数据 ?把数据库的数据输出到页面上 ???initData(data); ???????//添加事件 ???添加一行 ???var addBtnDom = document.getElementById(‘btn‘); ???addBtnDom.addEventListener(‘click‘,addElement);};//运行添加一行函数function addElement(){// ???找到table ???var tab = document.getElementById(‘tab‘);//添加一行 ????????????????添加节点 ???var trDom = document.createElement(‘tr‘); ???//一共有5个单元个所以循环五次 ???for(var i=0 ; i<5; i++){// ????每循环一次添加一个单元格 ???????var tdDom = document.createElement(‘td‘);//单元格的内容为空 ???????tdDom.innerHTML = ?" ";//把td放到tr里面 ???????trDom.appendChild(tdDom); ???}//把tr放到table里 ???tab.appendChild(trDom);}/*功能：用来把数据库中的数据放到页面上显示 ???数据是二维数组[【编号，姓名，性别，年龄】,...]参数：无返回：无*///运行页面加载完成后给的函数function initData(dd){// ???找到table ???var tab = document.getElementById(‘tab‘); ???//有多少tr呢 ?dd.length ????for(var i=0 ; i<dd.length; i++){// ???????每循环一次在table里追加一行 ?tr ???????var trDom = document.createElement(‘tr‘); ???// ??????每次添加tr时给tr添加一个标记 ??在下面运行删除时会用到 ???????trDom.setAttribute(‘num‘,i); ???????//有多少td呢 ?dd[i].length ???????for(var j=0 ; j<dd[i].length; j++){// ???????????每次循环添加一个td ???????????var tdDom = document.createElement(‘td‘);// ???把添加的td输出到页面上 ??????dd[i][j] = ?dd数组中二维数组的下标i一维数组的j下标的位置 ???????????tdDom.innerHTML = dd[i][j];// ???????把td添加到tr中 ???????????trDom.appendChild(tdDom); ???????}// ???????在大循环中每次添加一个td。。 ?修改删除所在的单元格 ???????var tdDom = document.createElement(‘td‘);// ???????每次添加单元格事，在单元格中添加一个按钮 ???????var btnModDom = document.createElement(‘button‘);// ??????按钮的内容是修改 ???????btnModDom.innerHTML= ‘修改‘;// ???????按钮的颜色是红色 ???????btnModDom.style.color=‘red‘;// ???????把按钮添加到td里 ???????tdDom.appendChild(btnModDom);// ???????每次添加单元格事，在单元格中添加一个按钮 ???????????????var btnModDom = document.createElement(‘button‘);// ??????按钮的内容是删除 ???????btnModDom.innerHTML= ‘删除‘;// ????给删除添加一个删除事件 ???????btnModDom.setAttribute(‘onClick‘,‘delThis(this)‘);// ????并给这个按钮添加一个标记删除时可以用到 ???????btnModDom.setAttribute(‘num‘,i);// ???????btnModDom.addEventListener(‘click‘,show);// ??????每次循环都把按钮追加到单元格 ???????tdDom.appendChild(btnModDom);// ???????把td添加到tr里 ???????trDom.appendChild(tdDom); ???????//把tr追加到table里面 ???????tab.appendChild(trDom); ???}}//运行delthis ??删除事件function delThis(obj){// ???找到传过来的这个元素的num值// ???obj.getAttribute(‘num‘);//找到所有的行， ?tr// ???var trArr = document.getElementsByTagName(‘tr‘);// ??循环所有的tr// ???for(var i=0 ; i<trArr.length; i++){// ???????如果得到的这个元素的num和循环出来的值的num相等// ???????if(trArr[i].getAttribute(‘num‘) == obj.getAttribute(‘num‘)){// ???就删除这个行// ???????????trArr[i].remove();// ???结束循环// ???????????break;// ???????}// ???} ??找到元素的父标签td的父标签tr然后删除掉 ???console.log(obj.parentElement.parentElement.parentElement.remove());}