javascript快速入門16--表格

水之原發表於2013-12-01
JavaScript

表格的層次結構

<table border="1">
    <caption>表格標題</caption>
    <thead>
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
            <th>表頭3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="3">腳註</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>資料</td>
            <td>資料</td>
            <td>資料</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>資料</td>
            <td>資料</td>
            <td>資料</td>
        </tr>
    </tbody>
</table>

 

上面是一個建立表格所用到的所有標籤，但一些標籤是可寫可不寫的，事實上一般的表格只需寫上tr與td標籤就行了，而標題caption,表頭thead表尾tbody等則是一些語義性元素

表格物件的一些屬性

    var table= document.getElementById("myTable");
    //獲取表格標題caption標籤
    var caption = table.getElementsByTagName("caption")[0];
    //HTML DOM提供的更簡單的方法
    caption= table.caption;//返回表格標題caption標籤，如果沒有則返回null
    if (caption) {
        alert(caption.firstChild.nodeValue);//輸出標題文字
    }
    var thead =table.tHead;//獲取表頭
    var tfoot = table.tFoot;//獲取表尾

 

由於caption,thead,tfoot這些標籤一個表格中只能出現一次，所以HTML DOM提供了直接的屬性來訪問，而對於tr,td,th,tbody這些重複的標籤，HTML DOM則給Table物件增加了一些集合來訪問

    //獲取所有tr
    var rows = table.getElementsByTagName("tr");//但會獲取巢狀表格中的tr
    //rows集合只會包含表格的行，而不包含表格下面巢狀表格的行
    rows = table.rows;//返回包含表格中所有行的一個陣列
    alert(rows[0].innerHTML);
    var tBodies = table.tBodies;//返回包含表格中所有tbody的一個陣列
    var cells =table.cells;//返回包含表格中所有單元格的一個陣列

 

注意，對於Table物件的cells屬性，它將返回所有td,th標籤，而對於tBodies屬性，即使HTML 原始碼中沒有tbody標籤，也會預設有一個tbody

表格物件的一些方法

建立標題:createCaption() 方法用於在表格中獲取或建立元素。返回一個 HTMLElement 物件，表示該表的元素。如果該表格已經有了標題，則返回它。如果該表沒有元素，則建立一個新的空元素，把它插入表格，並返回它。

    var caption = document.createElement("caption");
    caption.appendChild(document.createTextNode("新標題"));
    table.insertBefore(caption,table.firstChild);
    /*
    上面方法有兩大缺點：
    1.方法複雜
    2.如果已經存在caption標籤，則會造成caption標籤重複，導致後插入的無效
    */
    caption = table.createCaption();//注意，並不需要指定要將其插入到哪個表格中
    //因為該方法必須在對應的表格物件上呼叫
    caption.innerHTML = "新標題";

 

與createCaption相似的還有：

  • createTFoot() 在表格中建立一個空的 tFoot 元素;返回一個 TableSection，表示該表的〈tfoot〉 元素。如果該表格已經有了腳註，則返回它。如果該表沒有腳註，則建立一個新的空 〈tfoot〉 元素，把它插入表格，並返回它。
  • createTHead() 在表格中建立一個空的 tHead 元素;返回一個 TableSection，表示該表的〈thead〉元素。如果該表格已經有了表頭，則返回它。如果該表沒有表頭，則建立一個新的空〈thead〉元素，把它插入表格，並返回它。

既然有增加的方法，就有對應的刪除的方法

  • deleteCaption() 從表格刪除 caption 元素以及其內容。 如果該表有 〈caption〉 元素，則從文件樹種刪除它。否則，什麼也不做。
  • deleteTFoot() 從表格刪除 tFoot 元素及其內容。 如果該表有 〈tfoot〉 元素，則將它從文件樹種刪除，否則什麼也不做。
  • deleteTHead() 方法用於從表格刪除thead 元素。如果該表有 〈thead〉元素，則將它從文件樹種刪除，否則什麼也不做。

新增與刪除行

  • insertRow() 在表格中插入一個新行。 返回一個 TableRow，表示新插入的行。該方法建立一個新的 TableRow 物件，表示一個新的〈tr〉標記，並把它插入表中的指定位置。新行將被插入 index 所在行之前。若 index 等於表中的行數，則新行將被附加到表的末尾。如果表是空的，則新行將被插入到一個新的〈tbody〉 段，該段自身會被插入表中。
  • deleteRow() 從表格刪除一行。引數 index 指定了要刪除的行在表中的位置。行的編碼順序就是他們在文件原始碼中出現的順序。〈thead〉和〈tfoot〉 中的行與表中其它行一起編碼。

行 (TableRow) 物件

行物件的一些屬性：cells屬性返回行中所有單元格的一個陣列。rowIndex屬性返回該行在表中的位置。sectionRowIndex屬性返回在 tBody 、tHead 或 tFoot 中，行的位置。

    var row = table.rows[0];
    alert(row.cells.length);//第一行中單元格的數目
    alert(row.rowIndex);//0

 

TableRow 物件的方法

  • deleteCell() 刪除行中的指定的單元格。引數 index 是要刪除的表元在行中的位置。該方法將刪除錶行中指定位置的表元。
  • insertCell() 在一行中的指定位置插入一個空的td元素。 返回一個 TableCell 物件，表示新建立並被插入的 td 元素。 該方法將建立一個新的 td 元素，把它插入行中指定的位置。新單元格將被插入當前位於 index 指定位置的表元之前。如果 index 等於行中的單元格數，則新單元格被附加在行的末尾。請注意，該方法只能插入 td 資料表元。若需要給行新增頭表元，必須用 Document.createElement() 方法和 Node.insertBefore() 方法（或相關的方法）建立並插入一個 th 元素。
    var row = table.rows[2];
    var cell = row.insertCell(2);
    cell.innerHTML = "新插入的單元格";
    //上面的程式碼與下面的等效(但不考慮空白文字節點)
    var cell = document.createElement("td");
    cell.innerHTML = "新插入的單元格";
    row.insertBefore(cell,row.childNodes[2]);
    //刪除單元格
    row.deleteCell(2);
    //等效程式碼(同樣不考慮空白文字節點)
    row.removeChild(row.childNodes[2]);

 

TableCell 單元格物件

與TableCell物件相關的有用的屬性只有一個：cellIndex屬性返回單元在格行中的下標

    alert(table.rows[2].cells[3].cellIndex);//3

 

相關文章