JS DOM之table

来源：互联网发布：mac如何截图网页编辑：程序博客网时间：2024/06/14 01:02

表格的结构：

tHead : 表格头
tBodies : 表格头
tFoot : 表格尾

rows : 行
cells : 列

示例代码：

<script type="text/javascript">    window.onload = function(){        data = [ {id:1,username:'leo',sex:'M'}, {id:2,username:'Joey',sex:'M'}, {id:3,username:'Rachel',sex:'F'}, {id:4,username:'Penny',sex:'F'},   ];        var oTab = document.getElementById('tab1');   var oTbody = oTab.tBodies[0];    }<body><table id="tab1" width="100%" border="1px"><thead><th>编号</th><th>姓名</th><th>年龄</th><th>操作</th></thead><tbody><!-- <tr><td>1</td><td>Linda</td><td>3</td><td>删除</td></tr><tr><td>2</td><td>Joey</td><td>7</td><td>删除</td></tr> --></tbody></table></body>

表格的访问操作：oTab.tBodies[0].rows[0].cells[1].innerHTML

alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);

表格的插入操作：appendChild()

for( var i=0; i<data.length; i++){var oTr = document.createElement('tr');       if(i%2 == 0){ oTr.style.background = 'white';}else{oTr.style.background = 'gray';}var oTd = document.createElement('td');oTd.innerHTML = data[i].id;oTr.appendChild(oTd);var oTd = document.createElement('td');oTd.innerHTML = data[i].username;oTr.appendChild(oTd);var oTd = document.createElement('td');oTd.innerHTML = data[i].sex;oTr.appendChild(oTd);var oTd = document.createElement('td');oTd.innerHTML = ' '; //兼容IE浏览器oTr.appendChild(oTd);       oTbody.appendChild(oTr);}

给表格最后一列添加点击删除操作：removeChild()

oA = document.createElement('a');oA.innerHTML = 'delete';oA.href= 'javascript:;';oTd.appendChild(oA);oA.onclick = function(){oTbody.removeChild(this.parentNode.parentNode);for(var i=0; i<oTbody.rows.length; i++){if(i%2 == 0){oTbody.rows[i].style.background = 'white';}else{oTbody.rows[i].style.background = 'gray';}}}

1 0