DOM Basics-Creating tables
The use of JS to dynamically create a table has two formats, appendchild () and InsertRow, InsertCell (). But the first one is likely to have problems with IE, so it is recommended to use the second type.
1, InsertRow (Index): Index starting from 0
This function adds a new row to the row of index, such as InsertRow (0), before adding a new row to the first row. The default InsertRow () function is equivalent to InsertRow (-1) to add a new row to the end of the table. In general, when we use them, we are:
Objtable.insertrow (ObjTable.rows.length) is the last new row for table objtable.
InsertCell () and InsertRow are used in the same usage.
2, DeleteRow (Index): Index starting from 0
Deletes the row at the specified location, the parameter to pass in: index is the position of the row in the table, and can be obtained and then deleted by the following method:
var row = document.getElementById ("line ID");
var index = Row.rowindex; have this attribute
Objtable.deleterow (index);
When you delete a row from a table while you are using it, if you delete a row, the number of rows in the table changes immediately, and rows.length always gets smaller, so if you want to delete all the rows in the table:
Copy Code code 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, dynamically set cell and row properties
The format is as follows: SetAttribute (attribute, property value)
var objmytable = document.getElementById ("myTable");
Objmytable.setattribute ("Border", 1); Set a border of 1 for a table
A problem with setting styles is encountered when using
SetAttribute ("Class", "Inputbox1");
SetAttribute ("ClassName", "Inputbox1"),
4. Create a form
Learn about the additions and deletions of line <tr> and cell <td> you can create a table.
The first step: you need to have a dynamic change of your table, here is the table that already exists page, we set a id:mytable
var objmytable = document.getElementById ("myTable");
Step Two: Create objects for rows and columns
Copy Code code as follows:
var index = objMyTable.rows.length;
var nextrow = objmytable.insertrow (index); At the end of the line
var nextrow = objmytable.insertrow (0); At the top of the line
Here is the sample code
Copy Code code as follows:
<script type= "Text/javascript" >
var Count = false; Control Alternate Line Wrapping
var NO = 1; Line number
function AddRow () {
Count =! Count;
Add a row
var newtr = Table.insertrow (table.rows.length); New line at last
var newtr = table.insertrow (0); Add one line to the front
Add two columns
var newTd0 = Newtr.insertcell ();
var newTd1 = Newtr.insertcell ();
var newTd2 = Newtr.insertcell ();
Set column contents and properties
if (Count) {
NewTr.style.background = "#FFE1FF";
}
else {
NewTr.style.background = "#FFEFD5";
}
no++;
newtd0.innerhtml = ' <input type=checkbox id= ' box ' + NO + ' '/> ';
Newtd1.innertext = "No." + NO + "line";
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" >
<TD width= "6%" >
<input type= "checkbox" id= "Box1"/>
</td>
<td>
Line 1th
</td>
<td>
<input id= "Text1" type= "text"/>
</td>
</tr>
</table>
</form>
</body>
