Use jquery to dynamically add a row to the specified table, delete a row _jquery

Requirements Scenario

1), add a row

Supports adding one row to any row and configurable, such as adding a row to the first row, adding a row to the second row, adding a row to the penultimate row, and adding a row to the penultimate row, without affecting the change in demand.

Prerequisite: The number of rows must exist in the table or the addition is unsuccessful.

2), delete a row

Supports dynamic deletion of a row.

First show the results, if you like to study the code well.

1, the original interface is as follows:

2, add a line, if you want to add a line to click the "Add" button, now click Two will automatically add two lines, the effect of the following screenshot:

3, delete a row, if you want to delete the specified row, first select the line and then click the "Delete" button to delete (this is not nonsense ~ ~ ~ ~ ~), now select a row, the effect of the following screenshot:

4, the selected row to delete, now click the "Delete" button will be selected to delete the row, the effect of the following screenshot:

Core code:

$ ("#mytable tr"). Find ("Td:nth-child (1)") 1 means to get the first column of
$ ("#mytable tr") for each row. Find ("Td:nth-child (3)") 3 means to get the third column of each row

The code is as follows:

<%@ page language= "java" pageencoding= "UTF-8"%> <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >  

If the above article is not detailed enough, refer to the following article and demo