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>
时间： 2024-10-13 09:01:26