DOM中表格的操作方法总结

时间：2016-12-29 13:48:10 阅读：235 评论：0 收藏：0 [点我收藏+]

标签：指定 cell 表格操作方法 nod rip let tle 颜色

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>

DOM中表格的操作方法总结

标签：指定 cell 表格操作方法 nod rip let tle 颜色

原文地址：http://www.cnblogs.com/hjbky/p/6232543.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行