首页 > 代码库 > DOM中表格的操作方法总结

DOM中表格的操作方法总结

2024-08-29 22:57:15   222人阅读

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中表格的操作方法总结


联系
我们