动态操作表格(DOM操作)

动态操作表格(DOM操作)

	<*table*>元素是HTML中最复杂的结构之一。要想创建表格，一般都必须涉及表示表格行、单元格、表头等标签。由于涉及标签多，因而使用核心DOM方法创建和修改表格往往都免不了要编写大量的代码。
	首先，我们先来看下表格的HTML代码：

	<table border="1" width="600px"> 
        <tbody>
            <tr>
                <td> cell 1,1 </td>
                <td> cell 1,2 </td>
            </tr>
            <tr>
                <td> cell 2,1 </td>
                <td> cell 2,2 </td>
            </tr>
        </tbody>
    </table>

要使用核心 DOM 方法创建元素，得需要像下面这么多的代码：

    // 创建table
    var table = document.createElement('table');
    table.border = 1; // 表格边框宽度
    table.width = "600px"; // 表格宽度

    // 创建body
    var tbody = document.createElement('tbody');
    table.appendChild(tbody); // 将tbody加入到表格table中

    // 创建第一行
    var row1 = document.createElement('tr');
    tbody.appendChild(row1); // 将第一行加入到tbody中
    var cell1_1 = document.createElement('td'); // 创建第一行第一列
    cell1_1.appendChild(document.createTextNode('DOM_cell 1,1')); // 添加单元格内容
    row1.appendChild(cell1_1);// 将单元格（1，1）添加到第一行中
    var cell1_2 = document.createElement('td'); // 创建第一行第二列
    cell1_2.appendChild(document.createTextNode('DOM_cell 1,2')); // 添加单元格内容
    row1.appendChild(cell1_2);// 将单元格（1，2）添加到第一行中

    // 创建第二行
    var row2 = document.createElement('tr');
    tbody.appendChild(row2); // 将第二行加入到tbody中
    var cell2_1 = document.createElement('td'); // 创建第二行第一列
    cell2_1.appendChild(document.createTextNode('DOM_cell 2,1')); // 添加单元格内容
    row2.appendChild(cell2_1);// 将单元格（2，1）添加到第一行中
    var cell2_2 = document.createElement('td'); // 创建第二行第二列
    cell2_2.appendChild(document.createTextNode('DOM_cell 2,2')); // 添加单元格内容
    row2.appendChild(cell2_2);// 将单元格（2，2）添加到第一行中

    //最后将表格添加到文档主体中
    document.body.appendChild(table);

大家看了之后，很显然，代码很长，还有点不太好懂的感觉。所以为了方便构建表格，HTML DOM还为<table><tbody><tr>元素添加了一些属性和方法。

为<table>添加的属性和方法如下：

• caption：保存着对<caption>元素(如果有)的指针。
• tBodies：是一个<tbody>元素的HTMLCollection。
• tFoot：保存着对<tfoot>元素的指针。
• tHead：保存着对<thead>元素的指针。
• rows：是一个表格中所有行的HTMLCollection。
• createTHead()：创建<thead>元素，将其放到表格中，返回引用。
• createTFoot()：创建<tfoot>元素，将其放到表格中，返回引用。
• createCaption()：创建<caption>元素，将其放到表格中，返回引用。
• deleteTHead()：删除<thead>元素。
• deleteTFoot()：删除<tfoot>元素。
• deleteCaption()：删除<caption>元素。
• deleteRow(pos)：删除指定位置的行。
• insertRow(pos)：向rows集合中的指定位置插入一行。

为<tbody>添加的属性和方法如下：

• rows：保存着<tbody>元素中行的HTMLCollection。
• deleteRow(pos)：删除指定位置的行。
• insertRow(pos)：向rows集合中的指定位置插入一行，返回对新插入行的引用。

为<tr>添加的属性和方法如下：

• cells：保存着<tr>元素中单元格的HTMLCollection。
• deleteCell(pos)：删除指定位置的单元格。
• insertCell(pos)：向cells集合中的指定位置插入一个单元格，返回对新插入单元格的引用。
  使用这些方法和属性，可以极大的减少创建表格所需要的代码数量。下面看一下代码：

    // 创建table
    var table = document.createElement('table');
    table.border = 1; // 表格边框宽度
    table.width = "600px"; // 表格宽度

    // 创建body
    var tbody = document.createElement('tbody');
    table.appendChild(tbody); // 将tbody加入到表格table中

    // 创建第一行
    tbody.insertRow(0); // 索引从0开始
    tbody.rows[0].insertCell(0); //同样单元格的索引也是从0开始
    tbody.rows[0].cells[0].appendChild(document.createTextNode('NEW_DOM_cell 1,1'));
    tbody.rows[0].insertCell(1);
    tbody.rows[0].cells[1].appendChild(document.createTextNode('NEW_DOM_cell 1,2'));

    // 创建第二行
    tbody.insertRow(1);
    tbody.rows[1].insertCell(0);
    tbody.rows[1].cells[0].appendChild(document.createTextNode('NEW_DOM_cell 2,1'));
    tbody.rows[1].insertCell(1);
    tbody.rows[1].cells[1].appendChild(document.createTextNode('NEW_DOM_cell 2,2'));
    

    //最后将表格添加到文档主体中
    document.body.appendChild(table);

这样对比下，是不是简约了很多，并且行列也是比较明了的。