首页 > 代码库 > 表格操作练习
表格操作练习
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script>window.onload = function(){ var data = [ {id:1,name:‘leo‘,sex:‘男‘}, {id:2,name:‘tom‘,sex:‘男‘}, {id:3,name:‘cherry‘,sex:‘女‘}, {id:4,name:‘jack‘,sex:‘男‘} ]; var tab = document.getElementById(‘table1‘), df = document.createDocumentFragment(), tb = tab.tBodies[0]; var resetColor = function(){ for(var y=0;y<tb.rows.length;y++){ if(y%2 == 0) tb.rows[y].style.background = ‘#e0e0e0‘; else tb.rows[y].style.background = ‘#fff‘; } }; var createTd = function(elem,html){ var td = document.createElement(‘td‘); td.innerHTML = html; elem.appendChild(td); return td; }; if(!tb){ tb = document.createElement(‘tbody‘); tab.appendChild(tb); } for(var i in data){ var tr = document.createElement(‘tr‘), td; createTd(tr,data[i].id); createTd(tr,data[i].name); createTd(tr,data[i].sex); td = createTd(tr,‘<a href="javascript:;">删除</a>‘); (td.firstElementChild || td.firstChild).onclick = function(){ tb.removeChild(this.parentNode.parentNode); resetColor(); }; if(i%2==0) tr.style.background = ‘#e0e0e0‘; df.appendChild(tr); } tb.appendChild(df);};</script></head><body><table id="table1" width="100%" border="1px"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> </thead></table></body></html>
效果：
表格操作练习
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。