insertRow() method
Definition and usage
The insertRow() method is used to insert a new row at the specified position in the table.
grammar
tableObject.insertRow(index)
return value
Returns a TableRow representing the newly inserted row.
illustrate
This method creates a new TableRow object representing a new <tr> tag and inserts it into the table at the specified position.
The new row will be inserted before the row at index. If 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> section, which itself will be inserted into the table.
Throw
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 code code as follows:
<html>
<head>
<script type="text/javascript">
function insRow()
{
document.getElementById('myTable').insertRow(0)
}
</script>
</head>
<body>
<table id="myTable">
<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 a cell (<td> element) in a table row.
grammar
tablerowObject.deleteCell(index)
illustrate
The parameter index is the position in the row of the table element to be deleted.
This method will delete the table element at the specified position in the table row.
Throw
If the parameter index is less than 0 or greater than or equal to the number of table elements in the row, this method will throw a DOMException exception with code INDEX_SIZE_ERR.
example
Copy the code code as follows:
<html>
<head>
<script type="text/javascript">
functiondelRow()
{
document.getElementById('myTable').deleteRow(0)
}
</script>
</head>
<body>
<table id="myTable">
<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 a specified position in a row of an HTML table.
grammar
tablerowObject.insertCell(index)
return value
A TableCell object representing a newly created and inserted <td> element.
illustrate
This method creates a new <td> element and inserts it into the row at the specified position. The new cell will be inserted before the cell currently located at the position specified by index. If index is equal to the number of cells in the row, the new cell is appended to the end of the row.
Please note that this method can only insert <td> data table elements. If you need to add a header element to a row, you must create and insert a <th> element using the Document.createElement() method and the Node.insertBefore() method (or related methods).
Throw
If the parameter index is less than 0 or greater than or equal to the number of table elements in the row, this method will throw a DOMException exception with code INDEX_SIZE_ERR.
example
Copy the code code as follows:
<html>
<head>
<script type="text/javascript">
function insCell()
{
var x=document.getElementById('tr2').insertCell(0)
x.innerHTML="John"
}
</script>
</head>
<body>
<table>
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick="insCell()" value="Insert cell">
</body>
</html>
deleteCell()
Definition and usage
The deleteCell() method is used to delete a cell (<td> element) in a table row.
grammar
tablerowObject.deleteCell(index)
illustrate
The parameter index is the position in the row of the table element to be deleted.
This method will delete the table element at the specified position in the table row.
Throw
If the parameter index is less than 0 or greater than or equal to the number of table elements in the row, this method will throw a DOMException exception with code INDEX_SIZE_ERR.
example
Copy the code code as follows:
<html>
<head>
<script type="text/javascript">
functiondelCell()
{
document.getElementById('tr2').deleteCell(0)
}
</script>
</head>
<body>
<table>
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr id="tr2">
<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 code code as follows:
<script type="text/javascript">
vartrIndex = 0;
//Dynamicly add rows
unction appendConvert(){
//var sel = document.getElementById("selectConvertName");
var sel = document.getElementsByName("selectConvertName")[0];
var className;
if(null!=sel){
for(var i = 0; i < sel.options.length; i++){
if(sel.options[i].selected)
className=sel.options[i].value;
}
}
//Data comes from ajax, json format.
convert.getConvertBean2Json(className,
function(result) {
var obj = eval('('+result+')');
var table = document.getElementById("convertTable");
var newRow = table.insertRow(trIndex+1);
newRow.insertCell(0).innerHTML = obj.name+"<input type='button' value='Delete' onclick='deleteRow(this)'>";
newRow.insertCell(1).innerHTML = "<input type='text' name='convertList["+trIndex+"].id'><input type='hidden' name='convertList["+trIndex+"].name ' value='"+obj.name+"'>";
if(null!=obj.paramList){
var paramStr = "";
for(var i = 0; i < obj.paramList.length; i++){
paramStr = paramStr+
"Parameter name:"+obj.paramList[i].name+
";Parameter type:"+obj.paramList[i].type+
"; Parameter value: <input name='convertList["+trIndex+"].paramList["+i+"].value' type='text'><br>"+
"<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].name' value='"+obj.paramList[i].name+"'>"+
"<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].type' value='"+obj.paramList[i].type+"'>";
}
newRow.insertCell(2).innerHTML = paramStr;
}
trIndex++;
});
}
//delete row
on deleteRow(r){
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('convertTable').deleteRow(i);
trIndex--;
}
</script>