table insertRow, deleteRow definition and usage summary_javascript skills

How many rows does the table have: var trCnt = table.rows.length; (table is Id)

How many columns does each row have: for (var i=0; itable.rows [i].cells.length;

javascript operation table:

insertRow(), deleteRow(), insertCell(), deleteCell() method

table.insertRow( ) is no problem under IE but under Firefox it has to be changed to table.insertRow(-1)
Similarly its corresponding insertCell() also needs to be changed to insertCell(-1)

insertRow() method

Definition and Usage

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

Syntax

tableObject.insertRow(index)

Return value

Returns a TableRow representing the newly inserted row.

Description

This method creates a new TableRow object, representing a new 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 section, which will itself be inserted into the table.

Throws

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 code The code is as follows:

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

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

< /body>
< /html>

deleteCell()

Definition and Usage

deleteCell() method is used to delete cells ( elements) in table rows.

Syntax

tablerowObject.deleteCell(index)

Description

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

This method will delete the table element at the specified position in the table row.

Throws

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 code The code is as follows:

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

< table id="myTable" border="1">
< ; tr>
< td>Row1 cell1
< td>Row1 cell2
< /tr>
< tr> ;Row2 cell1
< td>Row2 cell2
< /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 element at a specified position in a row of an HTML table.

Syntax

tablerowObject.insertCell(index)

Return value

A TableCell object representing the newly created and inserted element.

Description

This method will create a new element and insert it into the row at the specified position. The new cell will be inserted before the cell currently 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 data table elements. If you need to add a header element to a row, you must create and insert a element using the Document.createElement() method and the Node.insertBefore() method (or related methods).

Throws

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 code The code is as follows:

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

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

< /body>
< /html>

deleteCell()

Definition and usage

deleteCell() method is used to delete cells in table rows (
Syntax

tablerowObject.deleteCell(index)

Description

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

This method will delete the table element at the specified position in the table row.

Throws

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 code The code is as follows:

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

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

< /body>
< /html>

Application in the project:

Copy code The code is as follows: