javascript表格操作的快捷方法

来源：互联网发布：淘宝通知降权了怎么办编辑：程序博客网时间：2024/05/16 04:10

一、表格的组成-<table>

表格式html中最复杂的标签之一，它的层次关系为table>thead/tbody/tfoot>tr>td,我们当然可以根据每一个标签创建一个javascript对象，然后将对象根据这个层次结构添加到父级结构中去，但是这样的操作很麻烦，javascript专门提供了操作表格的相关属性个方法。

二、javascript操作表格的属性和方法

1、<table>元素所对应的属性和方法

caption tBodies tHead tFoot rows

createTHead() deleteTHead()

createTFoot() deleteTFood()

createCaption() deleteCaption()

insertRow(postion) deleteRow(position)

2、<tbody>元素对应的属性和方法

rows

insertRow(posiyion) deleteRow(position)

3、<tr>元素的属性和方法

cells

insertCell(position) deleteCell(position)

三、实例演示

先创建一个html文档，内容如下：

<!doctype html>

<head>
    <meta charset="utf-8" />
    <title>表格操作演示</title>
    <script type="text/javascript" src="table.js"></script>
</head>

<body>
    <p id="create" onclick="createTable()">创建表格</p>

    <div id="createTable">

    </div>
</body>

然后添加javascript代码，如下：

function createTable() {
    var div = document.getElementById("createTable");
    var table = document.createElement("table"); //创建一个表格
    div.appendChild(table);
    table.style.border = "1px red solid";

    //表头
    var thead = document.createElement("tbody"); //创建一个表头
    thead.appendChild(document.createTextNode("表格的标题头")); //给白头添加文字内容
    table.appendChild(thead);

    //表格主体
    var tbody = document.createElement("tbody"); //创建表的主体

    var row0 = tbody.insertRow(0); //创建第一行
    row0.insertCell(0).appendChild(document.createTextNode("张三"));
    row0.insertCell(1).appendChild(document.createTextNode("男"));
    row0.insertCell(2).appendChild(document.createTextNode("23"));
    var row1 = tbody.insertRow(1); //创建第二行
    row1.insertCell(0).appendChild(document.createTextNode("李四"));
    row1.insertCell(1).appendChild(document.createTextNode("女"));
    row1.insertCell(2).appendChild(document.createTextNode("25"));
    table.appendChild(tbody);

    //表尾
    table.createTFoot().appendChild(document.createTextNode("这是表格的尾部"));

}

最后的运行结果为：

0 0