Table form input boxes and drop-down box to add dynamic deleting rows

Development tools and key technologies: Visual Studio and javascript

Author: Huang Can

Write Time: 2019.5.27

Layui plug-in initialization table form, a list of all the current parameters in the data table layui official website which is not found in table form the cell can be set to the drop-down box or input box attributes, not achieve what I want data entry, feeling only the query data tables have come out, each additional row of data, layui form on the table in a multi-line data query among no more spare the extra line. In the absence of query data, layui the table must first initialize the data assignment is empty, data: [] ,, otherwise initialized layui the table header row in the table can not even show up, it will only display a first load
Here Insert Picture Description

The data is first assignment is empty, the header row to load out, but no table table which shows only data, not to spare row table form
Here Insert Picture Description

There is no spare lines appear, use layui plug-initialized table form, can not dynamically add rows and deleting rows

Use jquery.bsgrid-1.37 version of the plug may occur spare rows may be placed in the drop down box and input box tag label tr among the labels and border style select input tags in the nested table among tables set border: none; width and height and then select tag input tag is equal to the cell width and height are about the same size or can be obtained like the effect you want, this way and fill almost like data entry in the table among the tables. In the process of placing the table below two buttons, a new line of dynamic invocation, a dynamic method calls delete rows

Here Insert Picture Description

Dynamic new line, use javascript to write, first need to declare a variable, according to the table of ID to get this table form, and then to get to the tr tag tag name table by table, tr tag is a line, declare a variable calculation row length, so that the number displayed in the table length table which, for each new row of dynamic data, the line number from the +1 (i.e., the line length + 1), then the variable declaration table to which the table row insert (new line is the insertRow means), after insertion of the row into insert cells in the row, the number of fields need to go out to add the number of rows in the cell corresponding to the data in the database is inserted in the header field, the last is inserted into each content unit Gerry, because the content of the input table and the table is not provided pull-down section of the cell, such as a conventional input tag insertion unit Alegre and select tags. Because the data in the table can be selected from among the table and backfilled to form block among them modal, the insertion of the new dynamic input tag writes a double-click method call.
Here Insert Picture Description
Dynamic delete rows, the first is to declare a variable table to get a table tr (ie table rows in the table), deleted rows are deleted from the beginning of the last line, delete can not start from the first row, if you start from the first row, then delete will first delete the header row, the header row but is not allowed to delete, delete the header row of the table will not know the data table in which some of the data. First determine whether the acquired table rows in the table is greater than two lines, the two lines is greater than the last line deleted from all lines, two lines of equal if not prompt the user to delete the first line, suggesting that the first line here is that in addition to the user's finger the first row of the table other than the first row lines. A first line across the table the table is the header row.

Here Insert Picture Description

Guess you like

Origin blog.csdn.net/weixin_44542088/article/details/90604871