DOM操作表格及样式

<table border="1" width="300">

<caption>人员表</caption>

<thead>

    <tr>

        <th>姓名</th>

        <th>性别</th>

        <th>年龄</th>

    </tr>

</thead>

<tbody>

    <tr>

        <td>张三</td>

        <td>男</td>

        <td>20</td>

    </tr>

    <tr>

        <td>李四</td>

        <td>女</td>

        <td>22</td>

    </tr>

</tbody>

<tbody>

    <tr>

        <td>张三</td>

        <td>男</td>

        <td>20</td>

    </tr>

    <tr>

        <td>李四</td>

        <td>女</td>

        <td>22</td>

    </tr>

</tbody>

<tfoot>

    <tr>

        <td colspan="3"></td>

    </tr>

</tfoot>

</table>

thead标签在一个表格里只能有一个
tfoot标签在一个表格里只能有一个
tbody标签在一个表格里有N个
caption标签，在一个表格里只有一个

使用DOM创建一个表格很累
使用DOM获取一个表格很累
window.onload=function(){
var table=document.getElementByTagName('table')[0];
alert(table.children[0].innerHTML); //不清晰
alert(table.children[2].children[1].children[1].innerHTML); //繁琐
}

HTML DOM

 

window.onload=function(){
var table=document.getElementsByTagName('table')[0];
alert(table.caption.innerHTML); //清晰，方便，简单
table.caption.innerHTML="存储表";

//alert(table.thead);

//alert(table.tBodies[0]);

//alert(table.rows.length); //得到所有tr的行数

//alert(table.tBodies[0].rows.length);

//得到第一行
//alert(table.tBodies[0].rows[0]);

//alert(table.tBodies[0].rows[0].cells.length);

//alert(table.tBodies[0].rows[1].cells[1].innerHTML); //很清晰，很方便

 

//table.deleteCaption();
//table.deleteTHead();

//table.tBodies[0].deleteRow(0); //删除第一行
//table.tBodies[0].rows[0].deleteCell(1);

}

//创建
window.onload=function(){
var table=document.createElement('table');
table.width=300;
table.border=1;
table.createCaption().innerHTML='人员表'
var thead=table.createTHead();
var tr=thead.insertRow(0);
tr.insertCell(0).innerHTML="数据1"
tr.insertCell(1).innerHTML="数据1"
tr.insertCell(2).innerHTML="数据1"
document.body.appendChild(table);

}
PS: 在创建表格的时候<table>、<tbody>、<th>没有特定的方法，需要使用document来创建。也可以模拟已有的方法编写特定的函数即可，例如，insertTH()之类的。