There are several rows in the table: var trCnt = table.rows.length; (table is Id)
How many columns are there for each row: for (var i=0; i<trCnt; i++)
table.rows[i].cells.length;
JavaScript operation table:
insertRow(), deleteRow(), insertCell(), deleteCell() methods
table.insertRow() is fine under IE, but in firefox, it has to be changed to table.insertRow(-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
tableObject.insertRow(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 the code INDEX_SIZE_ERR.
example
The code copy is 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 cells (<td> elements) in a table row.
grammar
tablerowObject.deleteCell(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 the code INDEX_SIZE_ERR.
example
The code copy is as follows:
<html>
< head>
< script type="text/javascript">
function delRow()
{
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 the specified position of a row in the HTML table.
grammar
tablerowObject.insertCell(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 position in 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 create and insert a <th> element using the Document.createElement() method and the Node.insertBefore() method (or related methods).
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 the code INDEX_SIZE_ERR.
example
The code copy is 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 cells (<td> elements) in a table row.
grammar
tablerowObject.deleteCell(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 the code INDEX_SIZE_ERR.
example
The code copy is as follows:
<html>
< head>
< script type="text/javascript">
function delCell()
{
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:
The code copy is as follows:
<script type="text/javascript">
var trIndex = 0;
// Dynamically increase row
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;
}
}
//The data comes from ajax, json form.
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 the line
on deleteRow(r){
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('convertTable').deleteRow(i);
trIndex--;
}
</script>