Shulou(Shulou.com)06/01 Report--

The previous words

The table table element is one of the most complex structures in HTML. To create a table, you must generally involve tags that represent table rows, cells, headers, and so on. Because of the large number of tags involved, it is often necessary to write a lot of code to create and modify tables using core DOM methods. This article will introduce the properties and methods of DOM operation table in detail.

Demand

To implement the table structure in the following format through DOM

Cell 1,1 Cell 2,1 Cell 1,2 Cell 2,2

DOMcore

If you use the DOMcore method, the method is as follows

/ / create the table var table = document.createElement ("table"); table.border = "1"; table.width = "100%"; / / create tbodyvar tbody = document.createElement ("tbody"); table.appendChild (tbody); / / create the first line var row1 = document.createElement ("tr"); tbody.appendChild (row1); var cell1_1 = document.createElement ("td"); cell1_1.appendChild (document.createTextNode ("Cell 1 Magazine 1")); row1.appendChild (cell1_1) Var cell2_1 = document.createElement ("td"); cell2_1.appendChild (document.createTextNode ("Cell 2dag1"); row1.appendChild (cell2_1); / / create the second line var row2 = document.createElement ("tr"); tbody.appendChild (row2); var cell1_2 = document.createElement ("td"); cell1_2.appendChild (document.createTextNode ("Cell 1d2")); row2.appendChild (cell1_2); var cell2_2 = document.createElement ("td") Cell2_2.appendChild (document.createTextNode ("Cell 2 Magazine 2"); row2.appendChild (cell2_2); / / add a table to the document body document.body.appendChild (table)

Properties and methods

The DOM code is obviously long, and to facilitate the construction of the table, HTML DOM adds attributes and methods to the, and elements.

[1] attributes and methods added to the element

Caption: save the pointer to the element tBodies: is the HTMLCollectiontFoot of an element: save the pointer to the element tHead: save the pointer to the element createTHead (): create the element, put it in the table, return the reference createTFoot (): create the element, put it in the table, return the reference createCaption (): create the element, put it in the table, return the reference deleteTHead (): delete the element deleteTFoot (): delete the element deleteCaption (): delete the element

[2] attributes and methods added to the element

Rows: HTMLCollectiondeleteRow (pos) that holds the row in the element: delete the row at the specified location insertRow (pos): insert a row into the rows collection at the specified location, returning a reference to the newly inserted row

[3] attributes and methods added to the element

Cells: HTMLCollectiondeleteCell (pos) that holds the cell in the element: delete the cell insertCell (pos) at the specified location: insert a cell at the specified location in the cells collection and return the reference code rewriting for the newly inserted cell

/ / create the table var table = document.createElement ("table"); table.border = "1"; table.width = "100%"; / / create tbodyvar tbody = document.createElement ("tbody"); table.appendChild (tbody); / / create the first line tbody.insertRow (0); tbody.rows [0] .insertCell (0); tbody.rows [0] .cells [0] .appendChild ("Cell 1); tbody.rows [0] .insertCell (1) Tbody.rows [0] .cells [1] .appendChild (document.createTextNode ("Cell 2 Magazine 1"); / / create the second line tbody.insertRow (1); tbody.rows [1] .insertCell (0); tbody.rows [1] .cells [0] .appendChild (document.createTextNode ("Cell 1 Magazine 2"); tbody.rows [1] .insertCell (1); tbody.rows [1] .cells [1] .appendChild (document.createTextNode ("Cell 2Cool 2")) / / add the table to the document body document.body.appendChild (table)

Effect display

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.