table, tbody, tr 元素的属性和方法

Posted on by mannuan One min read

<table>元素的属性和方法：

  1. caption：返回表格的caption元素节点，没有则返回null；
  2. tHead, tBodies, tFoot: 返回表格<thead>, <tbody>, <tfoot>元素；
  3. rows: 返回元素所有行<tr>元素的HTMLCollection;
  4. createTHead(), createTFoot(), createCaption(): 创建<thead>, <tfoot>, <caption>空元素，将其放到表格中，返回创建的<thead>, <tfoot>, <caption>元素节点；
  5. deleteTHead(), deleteTFoot(), deleteCaption(): 删除<thead>, <tfoot>, <caption>空元素，无返回值（或返回值为undefined）
  6. deleteRow(pos): 删除指定位置（注意参数不是索引，而是从0开始的位置）的行，返回undefined;
  7. insertRow(pos): 向rows集合中的指定位置（不是索引）插入一行；

<tbody>元素的属性和方法：

  1. rows: 返回<tbody>元素下所有行<tr>元素的HTMLCollection;
  2. deleteRow(pos): 删除指定位置（注意参数不是索引，而是从0开始的位置）的行，返回undefined;
  3. insertRow(pos):向rows集合中的指定位置（不是索引）插入一行；

<tr>元素的属性和方法：

  1. cells: 返回<tr>元素中单元格的HTMLCollection;
  2. deleteCell(pos): 删除指定位置（不是索引）的单元格；
  3. insertCell(pos): 向cells集合中的指定位置（不是索引）插入一个单元格，返回对新插入单元格的引用； 
<!DOCTYPE html>
<html>
    <body>
    </body>
    <script>
        // 创建table
        var table = document.createElement('table');
        table.border = 1;
        table.width = '100%';

        // 创建caption
        var caption = table.createCaption();
        caption.innerHTML = 'My Table';

        // 创建thead
        var thead = document.createElement('thead');
        thead.insertRow(0);
        thead.rows[0].insertCell(0);
        thead.rows[0].cells[0].appendChild(document.createTextNode('标题一'));
        thead.rows[0].insertCell(1);
        thead.rows[0].cells[1].appendChild(document.createTextNode('标题二'));
        table.appendChild(thead);

        // 创建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'));

        // 创建第二行
        var row02 = tbody.insertRow(1);
        var cell0201 = row02.insertCell(0),
            cell0202 = row02.insertCell(1);

        cell0201.appendChild(document.createTextNode('cell 2,1'));
        cell0202.appendChild(document.createTextNode('cell 2,2'));

        // 将表格添加到文档主体中
        document.body.appendChild(table);
    </script>
</html>