Home > Developer > JavaScript
Dom basics-create a table
Using js to dynamically create a table can be in two formats: appendChild (), insertRow, and insertCell (). However, the first type may have problems with IE, so the second type is recommended.
1. 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 the following methods:
ObjTable. insertRow (objTable. rows. length) is to add a row for the table objTable.
InsertCell () and insertRow have the same usage.
2. deleteRow (index): The index starts from 0.
Delete the row at the specified position. The parameter to be passed in: Index is the position of the row in the table. You can retrieve the row in the following method and delete it:
Var row = document. getElementById ("row Id ");
Var index = row. rowIndex; // This attribute is available.
ObjTable. deleteRow (index );
When you delete a row in a table, the number of rows in the table changes immediately. length is always getting smaller, so if you want to delete all rows in the table:
Copy codeThe Code is as follows:
Function removeAllRow (){
Var objTable = document. getElementById ("myTable ");
Var length = objTable. rows. length;
For (var I = 1; I <length; I ++ ){
ObjTable. deleteRow (I );
}
}
3. setAttribute () method to dynamically set attributes of cells and rows
Format: setAttribute (attribute, attribute value)
Var objMyTable = document. getElementById ("myTable ");
ObjMyTable. setAttribute ("border", 1); // you can specify 1 as the border for a table.
You may encounter a style setting problem when using it.
SetAttribute ("class", "inputbox1"); instead, use
SetAttribute ("className", "inputbox1 "),
4. Create a table
After learning about adding and deleting rows and cells, you can create a table.
Step 1: You need to have a table that you want to dynamically change. Here we will talk about a table that already exists on the page. Let's set an id: myTable
Var objMyTable = document. getElementById ("myTable ");
Step 2: Create row and column objects
Copy codeThe Code is as follows:
Var index = objMyTable. rows. length;
Var nextRow = objMyTable. insertRow (index); // the last row.
// Var nextRow = objMyTable. insertRow (0); // the first row.
The following is the sample code.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var Count = false; // controls alternate line breaks
Var NO = 1; // row number
Function addRow (){
Count =! Count;
// Add a row
Var newTr = table. insertRow (table. rows. length); // Add a row at the end
// Var newTr = table. insertRow (0); // Add a row at the beginning
// Add two columns
Var newTd0 = newTr. insertCell ();
Var newTd1 = newTr. insertCell ();
Var newTd2 = newTr. insertCell ();
// Set the column content and attributes
If (Count ){
NewTr. style. background = "# FFE1FF ";
}
Else {
NewTr. style. background = "# FFEFD5 ";
}
NO ++;
NewTd0.innerHTML = '<input type = checkbox id = "box' + NO +'"/> ';
NewTd1.innerText = "row" + NO + ";
NewTd2.innerHTML = '<input type = "text" id = "Text" + NO +' "/> ';
}
</Script>
<Body>
<Form id = "form1" runat = "server">
<Input type = "button" value = "insert row" onclick = "addRow ()"/>
<Table width = "399" border = "0" cellspacing = "1" id = "table" style = "font-size: 14px;">
<Tr bgcolor = "# FFEFD5">
& Lt; td width = "6%" & gt;
<Input type = "checkbox" id = "box1"/>
</Td>
<Td>
1st rows
</Td>
<Td>
<Input id = "Text1" type = "text"/>
</Td>
</Tr>
</Table>
</Form>
</Body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
