Home > Developer > JavaScript

JavaScript action table (InsertRow (), DeleteRow (), InsertCell (), Deletecell () method)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Definitions and usage

The InsertRow () method inserts a new row at the specified position in the table.

Grammar

Tableobject.insertrow (Index)

return value

Returns a TableRow that represents the newly inserted row.

Description

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

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

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

Thrown

If the argument index is less than 0 or greater than the number of rows in the table, the method throws the code as a Index_size_err domexception exception.

Example

The code is as follows Copy Code

<script type= "Text/javascript" >
function Insrow ()
{
document.getElementById (' myTable '). InsertRow (0)
}
</script>

<body>
<table id= "myTable" 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>

Deletecell ()

Definitions and usage

The Deletecell () method deletes the cells (<td> elements) in the table row.

Grammar

Tablerowobject.deletecell (Index)

Description

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

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

Thrown

If the argument index is less than 0 or greater than the number of tables in the row, the method throws the code as a Index_size_err domexception exception.

Example

The code is as follows Copy Code

<script type= "Text/javascript" >
function Delrow ()
{
document.getElementById (' myTable '). DeleteRow (0)
}
</script>
<body>

<table id= "myTable" 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-A-row" >

</body>

InsertCell ()

Definitions and usage

The InsertCell () method inserts an empty <td> element at a specified location on a line in the HTML table.

Grammar

Tablerowobject.insertcell (Index)

return value

A TableCell object that represents the newly created and inserted <td> element.

Description

The method creates a new <td> element and inserts it into the specified position in the row. The new cell is inserted before the table element that is currently at the specified position of index. If index equals the number of cells in the row, the new cell is appended to the end of the line.

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

Thrown

If the argument index is less than 0 or greater than the number of tables in the row, the method throws the code as a Index_size_err domexception exception.

Example

  code is as follows copy code

<script type=" Text/javascript "
function Inscell ()
  {
  var x=document.getelementbyid (' Tr2 '). InsertCell (0)
  x.innerhtml= " John
 }
</script>
<body>

<table border= "1"
<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>

Deletecell ()

Definitions and usage

The Deletecell () method deletes the cells (<td> elements) in the table row.

Grammar

Tablerowobject.deletecell (Index)

Description

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

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

Thrown

If the argument index is less than 0 or greater than the number of tables in the row, the method throws the code as a Index_size_err domexception exception.

Example

The code is as follows Copy Code

<script type= "Text/javascript" >
function Delcell ()
{
document.getElementById (' TR2 '). Deletecell (0)
}
</script>
<body>

<table border= "1" >
<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>

Application in the project:

The code is as follows Copy Code

<script type= "Text/javascript" >

var trindex = 0;

Add rows Dynamically
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 the 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 Row
On DeleteRow (R) {
var I=r.parentnode.parentnode.rowindex;
document.getElementById (' converttable '). DeleteRow (i);
trindex--;
}

</script>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More