javascript完成表格的添加和删除功能

来源：互联网发布：手机贴吧抢二楼软件编辑：程序博客网时间：2024/06/15 00:57

new document

window.onload = function(){
Highlight();
}
function addOne(obj){
var tbody = document.getElementById(‘table’).lastChild; //获取的是tbody
var tr = document.createElement(‘tr’);

     var td = document.createElement("td");     td.innerHTML = "<input type='text'/>";     tr.appendChild(td);     td = document.createElement("td");       td.innerHTML = "<input type='text'/>";     tr.appendChild(td);     td = document.createElement("td");      td.innerHTML = "<a href='javascript:;' onclick='deleteRow(this)'>删除</a>";     tr.appendChild(td);        tbody.appendChild(tr);       Highlight();//必须有这句 } function deleteRow(obj){    var tbody = document.getElementById('table').lastChild;  //获取tbody    var tr = obj.parentNode.parentNode;     tbody.removeChild(tr); } function Highlight(){    var tbody = document.getElementById('table').lastChild;     trs = tbody.getElementsByTagName('tr');       for(var i =1;i<trs.length;i++){        trs[i].onmouseover = function(){            this.style.backgroundColor ="#f2f2f2";        }         trs[i].onmouseout = function(){            this.style.backgroundColor ="#fff";        }     }   }

   <tr>    <td>xh01</td>    <td>王明</td>    <td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>   </tr>   <tr>    <td>xh02</td>    <td>张军</td>    <td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>   </tr>     </table>   <input type="button" value="添加一行" onclick="addOne()" />

学号姓名操作

阅读全文

0 0