DOM operation table example (DOM creates table)

<tableborder="1"width="300">
<caption>Staff List</caption>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zhang San</td>
<td>Male</td>
<td>20</td>
</tr>
<tr>
<td>Li Si</td>
<td>Female</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<tdcolspan="3">Total: N</td>
</tr>
</tfoot>
</table>

<script>
window.onload = function(){
vartable = document.createElement("table");
//Add attributes to the table
table.width=300;//You can also use this method: table.setAttribute('width',300)
table.border=1;</p> <p>//Create a table title
varcaption = document.createElement("caption");
table.appendChild(caption);</p> <p>//Add content to the table title
//caption.innerHTML="Staff table"; //Non-W3c standard method
varcaptionText=document.createTextNode("Personnel table");
caption.appendChild(captionText);</p> <p>
//Create the first row of the table, which is a header row
varthead=document.createElement("thead");
table.appendChild(thead);</p> <p>vartr=document.createElement("tr");
thead.appendChild(tr);</p> <p>//column
varth1=document.createElement("th");
tr.appendChild(th1);
th1.innerHTML="data";
varth2=document.createElement("th");
tr.appendChild(th2);
th2.innerHTML="data";</p> <p>document.body.appendChild(table);
};
</script>

window.onload = function(){
vartable=document.getElementsByTagName("table")[0];
alert(table.children[0].innerHTML);
};

window.onload = function(){
//Use HTMLDOM to get table elements
vartable = document.getElementsByTagName('table')[0]; //Get table reference
//According to HTMLDOM to get the <caption> of the table
alert(table.caption.innerHTML); //Get the content of caption
//table.caption.innerHTML="Student Table"; //You can also set the value
};

window.onload = function(){
//Use HTMLDOM to get table elements
vartable = document.getElementsByTagName('table')[0]; //Get table reference
//According to HTMLDOM to get the table header and footer <thead>, <tfoot>
alert(table.tHead); //Get the table header
alert(table.tFoot); //Get the footer of the table</p> <p> //According to HTMLDOM to get the table body<tbody>
alert(table.tBodies); //Get the collection of table bodies
};

window.onload = function(){
//Use HTMLDOM to get table elements
vartable = document.getElementsByTagName('table')[0]; //Get table reference
//According to HTMLDOM to get the number of rows in the table
alert(table.rows.length); //Get the number of rows in the table body according to HTMLDOM
alert(table.tBodies[0].rows.length); //Get the number of rows in the body
};

window.onload = function(){
//Use HTMLDOM to get table elements
vartable = document.getElementsByTagName('table')[0]; //Get the table reference</p> <p> //According to HTMLDOM to get the number of cells in the first row of the table body (tr)
alert(table.tBodies[0].rows[0].cells.length); //Get the number of cells in the first row
};

window.onload = function(){
//Use HTMLDOM to get table elements
vartable = document.getElementsByTagName('table')[0]; //Get the table reference</p> <p> //According to HTMLDOM, get the content of the first cell in the first row of the table body (td)
alert(table.tBodies[0].rows[0].cells[0].innerHTML); //Get the contents of the first cell in the first row
};

<script>
window.onload = function(){
//Use HTMLDOM to get table elements
vartable = document.getElementsByTagName('table')[0]; //Get the table reference</p> <p> //According to HTMLDOM to delete the title, header, footer, row, cell
//table.deleteCaption(); //Delete title
//table.deleteTHead(); //delete <thead>
//table.tBodies[0].deleteRow(0);//Delete a row of <tr>
//table.tBodies[0].rows[0].deleteCell(0); //Delete a cell of <td>
//table.tBodies[0].rows[0].deleteCell(1); //Delete the contents of a cell, which is equivalent to deleting a cell, and the following will hopefully be filled in
};
</script>

window.onload = function(){
//Create a table according to HTMLDOM
vartable = document.createElement('table');
table.border=1;
table.width=300;</p> <p>table.createCaption().innerHTML='Staff table';</p> <p>//table.createTHead();
//table.tHead.insertRow(0);
varthead=table.createTHead(); //This method returns a reference
vartr=thead.insertRow(0);//This method returns a reference</p> <p>vartd=tr.insertCell(0);
//td.appendChild(document.createTextNode('data'));//One way to add data, you can also use the following method
td.innerHTML="data";
vartd2=tr.insertCell(1);
//td2.appendChild(document.createTextNode('data 2'));
td2.innerHTML="data 2";</p> <p>document.body.appendChild(table);
};When creating a table, there is no specific method for <table>, <tbody>, and <th>. You need to use document to create them. You can also simulate existing methods and write specific functions, such as insertTH().