DOM Basics Tutorial: Using DOM to Control Forms_Basic Knowledge

I won’t talk about the css control of the table for now. First, let’s share the commonly used DOM of the table

The commonly used methods for table addition operations are insertRow() and insertCell() methods.

row is calculated from zero, for example:

Copy code The code is as follows:

var oTr = document.getElementById("member").insertRow(2 )

means adding a new line to the second line.

Copy code The code 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 var oTd = oTr.insertCell(i);
oTd.appendChild(aText[i]);
}

The variable oTr is to insert a new row into the table, then use insertCell to insert new data for this row, use createTextNode to create a new text node, and give it to oTd in appendChild, oTd is the new cell. ​

1. Insert a row (dynamically add a table)

Copy code The code is as follows:

   
   
       
       
       
       
       
   
   
       
       
       
       
       
   
   
       
       
       
       
       
   
   
       
       
       
       
       
   

Member List

Name	Class	Birthday	Constellation	Mobile
isaac	W13	Jun 24th	Cancer	1118159
girlwing	W210	Sep 16th	Virgo	1307994
tastestory	W15	Nov 29th	Sagittarius	1095245

2.修改表格的内容

当表格建立后，可以直接使用HtmlDom对表格进行操作，相比document.getElementById(),document.getElementsByTagName()操作更为方便。
oTable.rows[i].cell[j]
以上通过rows、cells两个属性轻松访问到表格特定的内容第i行和第j列(都是从0开始计数)，获得单元格对象后就可以使用innerHTML属性修改翔宇的内容了。
例如修改4行5列的内容为good
则可以使用以下代码

复制代码 代码如下:

var oTable = document.getElementById("table1");
oTable.rows[4].cells[5].innerHTML = "good";

3.删除表格内容

表格既然有添加、修改、就有删除功能。
表格中删除行使用deleteRow(i)方法，其中i为行号。
表格中删除列使用tr的deleteCell(j)方法。

如下代码表示删除表格的第二行及原来表格第三行的第二列

复制代码 代码如下:

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 of the third row of the original table. Considering that dynamic deletion does not affect the overall HTML framework, or when the table has a lot of content, dynamic deletion and addition can be used

Copy code The code is as follows:

                                                                                                                                                                                                                                                                                                                                             
                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         

Class

Delete column





Copy code


The code is as follows:

function deleteColumn(oTable, iNum) {
                                               // Customize the column deletion function, that is, delete the corresponding cells in each row
for (var i = 0; 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 you want to delete. Number. The writing method is very simple. Using the deleteCell() method, each row executes the corresponding method of deleting cells.