DOM中表格的操作方法总结
DOM中表格的操作方法总结
<table/>元素的方法如下：
- caption：指向<caption/>元素（如果存在）；
- tBodies：<tbody/>元素的集合；
- tFoot：指向<tfoot/>元素（如果存在）；
- tHead：指向<thead/>元素（如果存在）；
- rows：表格中所有行的集合；
- createTHead()：创建<thead/>元素并将其放入表格；
- createTFoot()：创建<tfoot/>元素并将其放入表格；
- createCaption()：创建<caption/>元素并将其放入表格；
- deleteTHead()：删除<thead/>元素；
- deleteTFoot()：删除<tfoot/>元素；
- deleteCaption()：删除<caption/>元素；
- deleteRow(position)：删除指定位置上的行；
- insertRow(position)：在rows集合中指定的位置上插入一新行。
<tbody/>元素的方法如下：
- rows：<tbody/>中所有行的集合；
- deleteRow(position)：删除指定位置上的行；
- insertRow(position)：在rows集合中指定的位置上插入一新行。
<tr/>元素的方法如下：
- cells：<tr/>元素中所有的单元格的集合；
- deleteCell(position)：删除给定位置上的单元格；
- insertCell(position)：在Cells集合的给定位置上插入一个新的单元格。
//创建table var table = document.createElement("table"); table.border = 1; table.width = "100%"; //创建tbody var tbody = document.createElement("tbody"); table.appendChild(tbody); //创建第一行 tbody.insertRow(0); tbody.rows[0].insertCell(0); tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1")); tbody.rows[0].insertCell(1); tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1")); //创建第二行 tbody.insertRow(1); tbody.rows[1].insertCell(0); tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2")); tbody.rows[1].insertCell(1); tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2")); //将表格添加到文档主体中 document.body.appendChild(table);
表格隔行变色实例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>隔行变色</title> <script> window.onload=function () { var oTab=document.getElementById('tab1'); var oldColor=''; //用于保存原本的颜色 for(var i=0;i<oTab.tBodies[0].rows.length;i++) { //鼠标经过变色 oTab.tBodies[0].rows[i].onmouseover=function () { oldColor=this.style.background; //获取原本的颜色 this.style.background='green'; }; oTab.tBodies[0].rows[i].onmouseout=function () { this.style.background=oldColor; }; //隔行变色设置 if(i%2) { oTab.tBodies[0].rows[i].style.background=''; } else { oTab.tBodies[0].rows[i].style.background='#CCC'; } } }; </script> </head> <body> <table id="tab1" border="1" width="500"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> </thead> <tbody> <tr> <td>1</td> <td>Blue</td> <td>27</td> </tr> <tr> <td>2</td> <td>张三</td> <td>23</td> </tr> <tr> <td>3</td> <td>李四</td> <td>28</td> </tr> <tr> <td>4</td> <td>王五</td> <td>25</td> </tr> <tr> <td>5</td> <td>张伟</td> <td>24</td> </tr> </tbody> </table> </body> </html>
