Summary of definitions and usage of table insertRow and deleteRow

There are several rows in the table: var trCnt = ; (table is Id)

How many columns are there for each row: for (var i=0; i<trCnt; i++)
[i].;

JavaScript operation table:

insertRow(), deleteRow(), insertCell(), deleteCell() methods

()No problem under IE, but under firefox, it must be changed to (-1)
Similarly, the corresponding insertCell() should also be changed to insertCell(-1)

insertRow() method

Definition and usage

The insertRow() method is used to insert a new row at a specified position in the table.

grammar

(index)

Return value

Returns a TableRow, indicating the newly inserted row.

illustrate

This method creates a new TableRow object, represents a new <tr> tag, and inserts it into the specified position in the table.

The new line will be inserted before the index line. If the index is equal to the number of rows in the table, the new row will be appended to the end of the table.

If the table is empty, the new row will be inserted into a new <tbody> segment, which itself will be inserted into the table.

Throw out

If the parameter index is less than 0 or greater than or equal to the number of rows in the table, this method will throw a DOMException exception with code INDEX_SIZE_ERR.

example

Copy the codeThe code is as follows:

 
<html> 
< head> 
< script type="text/javascript"> 
function insRow() 
{ 
('myTable').insertRow(0) 
} 
< /script> 
< /head> 

< body> 
< table  border="1"> 
< tr> 
< td>Row1 cell1</td> 
< td>Row1 cell2</td> 
< /tr> 
< tr> 
< td>Row2 cell1</td> 
< td>Row2 cell2</td> 
< /tr> 
< /table> 
< br /> 
< input type="button" onclick="insRow()" 
value="Insert new row"> 

< /body> 
< /html> 

deleteCell()

Definition and usage

The deleteCell() method is used to delete cells (<td> elements) in a table row.

grammar

(index)

illustrate

The parameter index is the position of the table element to be deleted in the row.

This method deletes the table elements at the specified position in the table row.

Throw out

If the parameter index is less than 0 or greater than or equal to the table element in the row, this method will throw a DOMException exception with code INDEX_SIZE_ERR.

example

Copy the codeThe code is as follows:

 
<html> 
< head> 
< script type="text/javascript"> 
function delRow() 
{ 
('myTable').deleteRow(0) 
} 
< /script> 
< /head> 
< body> 

< table  border="1"> 
< tr> 
< td>Row1 cell1</td> 
< td>Row1 cell2</td> 
< /tr> 
< tr> 
< td>Row2 cell1</td> 
< td>Row2 cell2</td> 
< /tr> 
< /table> 
< br /> 
< input type="button" onclick="delRow()" 
value="Delete first row"> 

< /body> 
< /html> 

insertCell()

Definition and usage

The insertCell() method is used to insert an empty <td> element at the specified position of a row in the HTML table.

grammar

(index)

Return value

A TableCell object representing a newly created and inserted <td> element.

illustrate

This method will create a new <td> element and insert it into the specified position in the row. The new cell will be inserted before the table element currently located at the specified location of the index. If index is equal to the number of cells in the row, the new cell is appended at the end of the row.

Note that this method can only insert <td> data table elements. If you need to add header elements to a row, you must use the () method and the () method (or related method) to create and insert a <th> element.

Throw out

If the parameter index is less than 0 or greater than or equal to the table element in the row, this method will throw a DOMException exception with code INDEX_SIZE_ERR.

example

Copy the codeThe code is as follows:

 
<html> 
< head> 
< script type="text/javascript"> 
function insCell() 
{ 
var x=('tr2').insertCell(0) 
="John" 
} 
< /script> 
< /head> 
< body> 

< table border="1"> 
< tr > 
< th>Firstname</th> 
< th>Lastname</th> 
< /tr> 
< tr > 
< td>Peter</td> 
< td>Griffin</td> 
< /tr> 
< /table> 
< br /> 
< input type="button" onclick="insCell()" value="Insert cell"> 

< /body> 
< /html> 

Copy the codeThe code is as follows:

 
<html> 
< head> 
< script type="text/javascript"> 
function delCell() 
{ 
('tr2').deleteCell(0) 
} 
< /script> 
< /head> 
< body> 

< table border="1"> 
< tr > 
< th>Firstname</th> 
< th>Lastname</th> 
< /tr> 
< tr > 
< td>Peter</td> 
< td>Griffin</td> 
< /tr> 
< /table> 
< br /> 
< input type="button" onclick="delCell()" value="Delete cell"> 

< /body> 
< /html> 

Applications in the project:

Copy the codeThe code is as follows:

 
<script type="text/javascript"> 

var trIndex = 0; 

// Dynamically increase row
unction appendConvert(){ 

//var sel = ("selectConvertName"); 
var sel = ("selectConvertName")[0]; 

var className; 
if(null!=sel){ 
for(var i = 0; i < ; i++){ 
if([i].selected) 
className=[i].value; 
} 
} 
//The data comes from ajax, json form.
convert.getConvertBean2Json(className, 
function(result) { 
var obj = eval('('+result+')'); 
var table = ("convertTable"); 

var newRow = (trIndex+1); 
(0).innerHTML = +"<input type='button' value='delete' onclick='deleteRow(this)'>";
(1).innerHTML = "<input type='text' name='convertList["+trIndex+"].id'><input type='hidden' name='convertList["+trIndex+"].name' value='"++"'>"; 
if(null!=){ 
var paramStr = ""; 
for(var i = 0; i < ; i++){ 
paramStr = paramStr+ 
"Parameter name:"+[i].name
"; Parameter type: "+[i].type+
"; Parameter value: <input name='convertList["+trIndex+"].paramList["+i+"].value' type='text'><br>"+
"<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].name' value='"+[i].name+"'>"+ 
"<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].type' value='"+[i].type+"'>"; 
} 
(2).innerHTML = paramStr; 
} 
trIndex++; 
}); 

} 


//Delete the line
on deleteRow(r){ 
var i=; 
('convertTable').deleteRow(i); 
trIndex--; 
} 

</script> 