javascript_操作表格

表格的一些常用属性：

caption(唯一) / tBodies / tFoot / tHead / rows / cells

一些常用方法：

createTHead() / createCaption() / deleteTHead()

获取caption

table.caption.innerHTML

获取tBody中的列数 (tHead/tBodies)

table.tBodies[0].rows.length

获取行数：

table.rows.length

获取一行的列数

table.rows[1].cells.length

deleteCaption(); 删除caption属性

table.deleteCaption();

deleteTHead() 删除tHead一行

table.deleteTHead(1);

deleteRow(num) 删除行

table.deleteRow(2);

deleteCell(num); 删除第3行第3列的单元格

table.rows[2].deleteCell(2);

创建表格

createCaption() 创建Caption

createTHead() 创建tHead

insertRow(num) 创建行

insertCell(num) 创建列

tFoot tHead 返回引用

var table = document.createElement("table");
table.border = 1;
table.width = '300';
var caption = table.createCaption();
caption.innerHTML = "人员信息";     // 创建caption

var thead = table.createTHead();    // 创建thead
var tr1 = thead.insertRow(0);
tr1.insertCell(0).innerHTML = "姓名";
tr1.insertCell(1).innerHTML = "性别";
tr1.insertCell(2).innerHTML = "年龄";

var tbody = table.createTBody(0);
var tbody_tr = tbody.insertRow(0);
tbody_tr.insertCell(0).innerHTML = "张三";
tbody_tr.insertCell(1).innerHTML = "男";
tbody_tr.insertCell(2).innerHTML = "30";

var tr2 = table.insertRow(2);
tr2.insertCell(0).innerHTML = "李四";
tr2.insertCell(1).innerHTML = "男";
tr2.insertCell(2).innerHTML = "40";

document.body.appendChild(table);       // 容易遗忘

创建完后再浏览器中检查网页会多出一段HTML代码：

<table border=1 width=300>
<caption>人员信息</caption>
<tHead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</tHead>
<tBody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>30</td>
</tr>
</tBody>
</table>