Table CSS control is not to say first, share the following table common Dom
The methods commonly used for table add operations are the InsertRow () and Insertcell () methods.
The row is calculated from zero, for example:
Copy Code code as follows:
var oTr = document.getElementById ("member"). InsertRow (2)
refers to adding a new row to the second row.
Copy Code code 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 variable OTR inserts a new row for the table, uses Insertcell to insert new data for the row, creates a new text node with createTextNode, and the new cell in AppendChild to OTD,OTD.
1. Insert a row (add table dynamically)
Copy Code code 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 contents of the table
When the table is established, you can use Htmldom to manipulate the table directly, which is more convenient than document.getElementById () and document.getElementsByTagName ().
OTABLE.ROWS[I].CELL[J]
The above two properties through rows, cells easily access to table-specific content row I and J column (all starting from the 0 count), get the Cell object can use the innerHTML property to modify the content of Xiang Yu.
For example, to modify the contents of 4 rows 5 columns Good
You can use the following code
Copy Code code as follows:
var otable = document.getElementById ("table1");
otable.rows[4].cells[5].innerhtml = "good";
3. Delete table contents
Since the table has been added, modified, there is a deletion function.
The rows in the table are deleted using the DeleteRow (i) method, where I is the line number.
Deletecell (j) method for deleting columns in the table using TR.
The following code represents the deletion of the second row of the table and the second column in the third row of the original table
Copy Code code as follows:
var otable = document.getElementById ("table1"); OTABLE.DELETEROW[2]; OTABLE.ROWS[2].DELETECELL[3];
The following code represents the deletion of the second row of the table and the second column in the third row of the table taking into account that dynamic deletion does not affect the overall HTML framework, or if there are many table contents, you can use dynamic deletion to add the method
Copy Code code 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
Copy Code code as follows:
function DeleteColumn (otable, Inum) {
Custom Delete Column function, that is, each row deletes the corresponding cell
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 directly callable method in the DOM for deleting a table column, and you need to write the DeleteColumn () method, which accepts two parameters, one parameter is a Table object, and the other is the column number you want to delete. Writing a method is simple, using the Deletecell () method, each row performs the appropriate method of deleting cells.
