How to Create a table using javascript (two ways to draw a table using javascript) _ basic knowledge-js tutorial

Using js to dynamically create a table can be in two formats: appendChild (), insertRow, and insertCell (). The two methods are similar, but the first one may have problems with IE. Therefore, we recommend that you use the second method. Refer to the solution and usage method below. 1. inserRow () and insertCell () Functions

The insertRow () function can contain parameters in the following format:

InsertRow (index): index starts from 0

This function adds a new row to the row of the index, such as insertRow (0), before the new row is added to the first row. The default insertRow () function is equivalent to insertRow (-1) and adds a new row to the end of the table. Generally, we use objTable. insertRow (objTable. rows. length) to add a row for the table objTable.

InsertCell () and insertRow have the same usage.

2. deleteRow () and deleteCell () Methods

The deleteRow () function can contain parameters in the following format: deleteRow (index): index starts from 0.

Similar to the preceding two methods, the row and cell at the specified position are deleted. The parameter to be passed in: Index is the position of the row in the table. You can obtain the parameter in the following method and delete it:

The Code is as follows:

Var row = document. getElementById ("row Id ");
Var index = row. rowIndex; // you can specify this attribute.
ObjTable. deleteRow (index );

One problem I encountered during usage is that when you delete a row in a table, the number of rows in the table changes immediately, so if you want to delete all rows in the table, the following code is incorrect:

The Code is as follows:

Function clearRow (){
ObjTable = document. getElementById ("myTable ");

For (var I = 1; I {
TblObj. deleteRow (I );
}
}

This code deletes the table body of the original table. There are two problems. First, it cannot be deleteRow (I). It should be deleteRow (1 ). Because the number of rows in the table is changing when the table row is deleted, this is the key to the problem, rows. length is always getting smaller, and the number of rows to be deleted is always half as expected. Therefore, the correct code for deleting rows in the table should be as follows:

The Code is as follows:

Function clearRow (){
ObjTable = document. getElementById ("myTable ");
Var length = objTable. rows. length;
For (var I = 1; I {
ObjTable. deleteRow (I );
}
}

3. dynamically set the attributes of cells and rows

A. Use the setAttribute () method in the following format: setAttribute (attribute, attribute value)

Note: almost all DOM objects in this method can be used. The first parameter is the attribute name, for example, border. The second parameter is the value you want to set for border, for example, 1.

The Code is as follows:

Var objMyTable = document. getElementById ("myTable ");

ObjMyTable. setAttribute ("border", 1); // you can specify 1 as the border for a table.

For example, if you want to set a height for a TD object, you must first obtain the TD object and then use the setAttribute () method.

The Code is as follows:

Var objCell = document. getElementById ("myCell ");

ObjCell. setAttribute ("height", 24); // set the height of a cell to 24

SetAttribute ("class", "inputbox2") cannot be used when setting styles. setAttribute ("className", "inputbox2") should be used instead, I guess there are the same problems with others. Some attributes are inconsistent with those in DW.

B. Direct assignment

The Code is as follows:

Var objMyTable = document. getElementById ("myTable ");

ObjMyTable. border = 1; // you can specify 1 as the border for the table.

This method is also applicable to all.

4. Create a table

Understand the lineAnd cellTo create a table.

Step 1: You need to have a table that you want to dynamically change. Here I am talking about a table that already exists on the page. We need to set an id: myTable

The Code is as follows:

Var objMyTable = document. getElementById ("myTable ");

Step 2: Create row and column objects

The Code is as follows:

Var index = objMyTable. rows. length-1;
Var nextRow = objMyTable. insertRow (index); // the row to be added. Here, it is added from the last row.

// Cell number
Var newCellCartonNo = nextRow. insertCell ();
Var cartonNoName = "IptCartonNo ";
NewCellCartonNo. innerHTML ="";
NewCellCartonNo. setAttribute ("className", "tablerdd ");

In this way, you can simply create a row and a column. The specific code is pasted below. It's just a simple example, but the method is probably the above ~

The Code is as follows:

Blu-ray-BlueShine