JS Dynamic Automatic Add Delete

Source: Internet
Author: User

Dome file:

<table cellpadding= "0" cellspacing= "0" class= "right-table" style= "border-collapse:collapse; width:710px; "id=" Testtbl ">
&LT;TD style= "width:165px" ><input type= "text" class= "text name" placeholder= "name" ></td>
&LT;TD style= "width:180px" ><input type= "text" class= "text value" placeholder= "value" ></td>
&LT;TD style= "width:42px" ><span class= "del" onclick= "del (This)" ></span></td>

JS file:

<script type= "Text/javascript" >
Automatically add rows
function AddRow () {
var newtal = document.getElementById (' testtbl '). InsertRow (0);
var newTd0 = Newtal.insertcell (0);
var newTd1 = Newtal.insertcell (1);
var newTd2 = Newtal.insertcell (2);
newtd0.innerhtml = ' <td style= ' width:165px "><input type=" text "class=" text name "placeholder=" name "></ Td> ';
newtd1.innerhtml = ' <td style= ' width:180px "><input type=" text "class=" text value "placeholder=" value "> </td> ';
newtd2.innerhtml = ' <td style= ' width:42px ' ><span class= ' del ' onclick= ' del (this) ' &GT;&LT;/SPAN&GT;&LT;/TD > ';

Automatically delete rows
Function del (r) {
var I=r.parentnode.parentnode.rowindex;
document.getElementById (' Testtbl '). DeleteRow (i);



The InsertCell () method is used to insert an empty <td> element at a specified location on one line of the HTML table

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 in index. If index equals the number of cells in the row, the new cell is appended to the end of the row.

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

JS Dynamic Automatic Add Delete

Related Article

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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