Basic DOM Tutorial: Using DOM to control tables

Basic DOM Tutorial: Using DOM to control tables

The css control of the table is not mentioned first. First, share the common DOM of the table.

 

The insertRow () and insertCell () methods are commonly used to add tables.

Row is calculated from scratch, for example:

 

The Code is as follows:

Var oTr = document. getElementById ("member"). insertRow (2)

 

Adds a new row to the second row.

 

The Code is as follows:

Var aText = new Array ();
AText [0] = document. createTextNode ("fresheggs ");
AText [1] = document. createTextNode ("W610 ");
AText [2] = document. createTextNode ("Nov 5th ");
AText [3] = document. createTextNode ("Scorpio ");
AText [4] = document. createTextNode ("1038818 ");
For (var I = 0; I <aText. length; I ++ ){
Var oTd = oTr. insertCell (I );
OTd. appendChild (aText [I]);
}

 

The oTr variable inserts a new row into the table, and insertCell inserts new data into the row. createTextNode is used to create a new text node, and oTd is the new cell in appendChild.

1. Insert a row (Add Table dynamically)

 

The Code is as follows:

<Script type = "text/javascript">
Window. onload = function (){
Var oTr = document. getElementById ("member"). insertRow (2); // insert a row
Var aText = new Array ();
AText [0] = document. createTextNode ("fresheggs ");
AText [1] = document. createTextNode ("W610 ");
AText [2] = document. createTextNode ("Nov 5th ");
AText [3] = document. createTextNode ("Scorpio ");
AText [4] = document. createTextNode ("1038818 ");
For (var I = 0; I <aText. length; I ++ ){
Var oTd = oTr. insertCell (I );
OTd. appendChild (aText [I]);
}
}
</Script>
<Table class = "datalist" summary = "list of members in EE Studay" id = "member">
<Caption> Member List </caption>
<Tr>
<Th scope = "col"> Name </th>
<Th scope = "col"> Class </th>
<Th scope = "col"> Birthday </th>
<Th scope = "col"> Constellation </th>
<Th scope = "col"> Mobile </th>
</Tr>
<Tr>
<Td> isaac </td>
<Td> W13 </td>
<Td> Jun 24th </td>
<Td> Cancer </td>
<Td> 1118159 </td>
</Tr>
<Tr>
<Td> girlwing </td>
<Td> W210 </td>
<Td> Sep 16th </td>
<Td> Virgo </td>
<Td> 1307994 </td>
</Tr>
<Tr>
<Td> tastestory </td>
<Td> W15 </td>
<Td> Nov 29th </td>
<Td> Sagittarius </td>
<Td> 1095245 </td>
</Tr>
</Table>

 

2. Modify the table content

After a table is created, you can directly use HtmlDom to operate the table, which is more convenient than document. getElementById () and document. getElementsByTagName.
OTable. rows [I]. cell [j]
The preceding two attributes, rows and cells, are used to easily access row I and column j (both counting from 0) of specific table content ), after obtaining the cell object, you can use the innerHTML attribute to modify the content of Xiang Yu.
For example, modify the content of four rows and five columns to good
You can use the following code:

 

The Code is as follows:

Var oTable = document. getElementById ("table1 ");
OTable. rows [4]. cells [5]. innerHTML = "good ";

 

3. Delete table content

Since tables have been added, modified, and deleted.
Delete rows in the table using the deleteRow (I) method, where I is the row number.
Delete a column in the table using the deleteCell (j) method of tr.

The following code deletes the second row of the table and the second column of the third row of the original table.

 

The Code is as follows:

Var oTable = document. getElementById ("table1"); oTable. deleteRow [2]; oTable. rows [2]. deleteCell [3];

 

The following code deletes the second row of the table and the second column of the third row of the original table. Considering that dynamic deletion does not affect the overall html framework, you can use the dynamic deletion and addition method.

 

The Code is as follows:

<Script type = "text/javascript">
Window. onload = function (){
Var oTr = document. getElementById ("member"). insertRow (2); // insert a row
Var aText = new Array ();
AText [0] = document. createTextNode ("fresheggs ");
AText [1] = document. createTextNode ("W610 ");
AText [2] = document. createTextNode ("Nov 5th ");
AText [3] = document. createTextNode ("Scorpio ");
AText [4] = document. createTextNode ("1038818 ");
For (var I = 0; I <aText. length; I ++ ){
Var oTd = oTr. insertCell (I );
OTd. appendChild (aText [I]);
}
}
</Script>
<Table class = "datalist" summary = "list of members in EE Studay" id = "member">
<Caption> Member List </caption>
<Tr>
<Th scope = "col"> Name </th>
<Th scope = "col"> Class </th>
<Th scope = "col"> Birthday </th>
<Th scope = "col"> Constellation </th>
<Th scope = "col"> Mobile </th>
</Tr>
<Tr>
<Td> isaac </td>
<Td> W13 </td>
<Td> Jun 24th </td>
<Td> Cancer </td>
<Td> 1118159 </td>
</Tr>
<Tr>
<Td> girlwing </td>
<Td> W210 </td>
<Td> Sep 16th </td>
<Td> Virgo </td>
<Td> 1307994 </td>
</Tr>
<Tr>
<Td> tastestory </td>
<Td> W15 </td>
<Td> Nov 29th </td>
<Td> Sagittarius </td>
<Td> 1095245 </td>
</Tr>
</Table>

 

Delete column

 

The Code is as follows:

Function deleteColumn (oTable, iNum ){
// Customize the delete column function, that is, delete the corresponding cell in each row
For (var I = 0; I <oTable. rows. length; I ++)
OTable. rows [I]. deleteCell (iNum );
}
Window. onload = function (){
Var oTable = document. getElementById ("table1 ");
DeleteColumn (oTable, 2 );
}

 

There is no callable method in the DOM for deleting table columns. You need to write the deleteColumn () method by yourself. This method accepts two parameters, one of which is a table object, another parameter is the column number to be deleted. The writing method is very simple. The deleteCell () method is used to delete cells in each row.