I won’t talk about the css control of the table for now. First, I will share the commonly used DOMs in the table below.
The commonly used methods for adding table operations are insertRow() and insertCell() methods.
row is calculated from zero, for example:
Copy the code as follows: var oTr = document.getElementById("member").insertRow(2)
It means adding a new line to the second line.
The code copy 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 variable oTr inserts a new row for the table, then uses insertCell to insert new data for this row, uses createTextNode to create a new text node, and gives it to oTd in appendChild, and oTd is the new cell.
1. Insert a row (dynamic add table)
The code copy is as follows:
<script type="text/javascript">
window.onload=function(){
var oTr = document.getElementById("member").insertRow(2); //Insert a line
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 summary="list of members in EE Sunday" 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 content of the table
After the 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 above can easily access the i-th row and j-th column of the table through the two attributes rows and cells (both counted from 0). After obtaining the cell object, you can use the innerHTML attribute to modify Xiangyu's content.
For example, modify the content of 4 rows and 5 columns to be good
Then you can use the following code
The code copy is as follows:
var oTable = document.getElementById("table1");
oTable.rows[4].cells[5].innerHTML = "good";
3. Delete the table contents
Since the table has the function of adding, modifying, and deleting it.
Deleting rows in the table uses the deleteRow(i) method, where i is the row number.
Deleting columns in the table uses the deleteCell(j) method of tr.
The following code indicates the second row of the deleted table and the second column of the third row of the original table
The code copy is as follows: var oTable = document.getElementById("table1"); oTable.deleteRow[2]; oTable.rows[2].deleteCell[3];
The following code indicates that if the second row of the table is deleted and the second column of the third row of the original table is considered to have dynamic deletion and not affect the overall html framework, or if the table content is a lot, dynamic deletion and addition can be adopted.
The code copy is as follows:
<script type="text/javascript">
window.onload=function(){
var oTr = document.getElementById("member").insertRow(2); //Insert a line
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 summary="list of members in EE Sunday" 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 columns
The code copy is as follows:
function deleteColumn(oTable, iNum) {
//Customize column deletion function, that is, delete the corresponding cell for 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);
}
For deleting table columns, there is no directly callable method in the DOM. You need to write the deleteColumn() method yourself. This method accepts two parameters, one parameter is the table object, and the other parameter is the column number you want to delete. The writing method is very simple. Using the deleteCell() method, each row executes the corresponding method of deleting cells.