Add and delete a set of text boxes in JS and verify the input information to determine its correctness

A problem encountered during project creation is that we need to add several groups of data to the database, but the specific groups of data are uncertain and some customers fill in the data. For example, we need to add a discount policy, A policy may have many group solutions, such as "100 off, 200 off, 500 off", etc. This is implemented as a group of solutions, however, I am not sure whether there are several sub-solutions in a group of solutions. Therefore, I will use JS to add and delete sub-solutions, and I will judge whether the input of the solution is correct, and write data to the database through json transmission. Here we mainly write if you add or delete a group of sub-projects and if you add verification to each text box.

Add a set of text boxes dynamically:
Copy codeThe Code is as follows:
Var countTable = 0;
// Add table rows
AddTable = function (){
// Obtain the table
Var tab1 = document. getElementById ("discountTable ");
// Number of all cells in the table
// Cell = tab1.cells. length;
// Number of rows in the table
N = tab1.rows. length;
// Number of columns in the table
// Cell = cell/n;
// Add rows to the table
R = tab1.insertRow (n );
// Add each cell of the current row
R. insertCell (0 ). innerHTML = 'full consumption x RMB: <input type = \ 'text \ 'style = "width: 150px;" onblur = "terifyNumFirst (this) "class = \ 'groupfirst \ '/> <label class =" veritifyMessage "style =" display: none; color: # F00; font-size: 16px; width: 10px; float: right "> * </label> ';
R. insertCell (1 ). innerHTML = 'discount rate: <input type = \ 'text \ 'style = "width: 150px;" onblur = "terifyNumSecond (this) "class = \ 'groupsecond \ '/> <label class =" veritifyMessage "style =" display: none; font-size: 16px; color: # F00; width: 10px; float: right "> * </label> ';
R. insertCell (2 ). innerHTML = '<input type = "image" name = "imageField" id = "' + countTable + '" onclick = "deleteTable (this)" src = ".. /images/closeStraty.jpg "/> ';
CountTable = countTable + 1;
}

Note:
1. The countTable here should be all variables used to identify each row. In this way, it is determined that each row is different to prevent duplicate IDs after a row is deleted.
2. Here we add a focus departure event for each text, that is, when the focus leaves the current text box, we need to check whether it meets the input seriously.
3. A label is added behind the text box as the verification control. This label is visible when the entered text does not meet the requirements.
Delete any row:
Copy codeThe Code is as follows:
// Delete the current row
DeleteTable = function (el ){
// Alert (el. id );
// Obtain the table
Var tab1 = document. getElementById ("discountTable ");
// Cyclically determine the row to be deleted
For (I = 0; I <tab1.rows. length; I ++ ){
// Obtain the row ID
Var deleteValue = tab1.rows [I]. cells [2]. childNodes [0]. id;
// Obtain the id of each row in a loop and compare it with the ID of the current click. If the id is the same, delete the row.
If (el. id = deleteValue ){
Tab1.deleteRow (I );
Break;
}
}
}

First, we need to delete the row location. here we need to compare which row in the table is the current vertex and then delete it.
How to display and hide the verification control (when the focus leaves the text, judge the text ):
Copy codeThe Code is as follows:
// Verify that the first entry is valid
TerifyNumFirst = function (objText ){
Var terifyText = objText. value;
// The information cannot be blank.
If (terifyText = "")
{
ObjText. parentNode. children [1]. style. display = "block ";
Return;
}
// The information must be a number
If (isNaN (terifyText ))
{
ObjText. parentNode. children [1]. style. display = "block ";
Return;
}
ObjText. parentNode. children [1]. style. display = "none ";
}

When all the information needs to be written, we also need to make a judgment. If there is an invalid prompt, otherwise the datatable will be generated and returned. How to transmit the information to the background will be written in the next blog.
Copy codeThe Code is as follows:
// Generate a able object
Function generateDtb (){
// Determine whether data can be written. If false is true, data can be written. If true is true, data cannot be written.
Var flag = false;
// Obtain the table
Var tab1 = document. getElementById ("discountTable ");
// The first column of data
Var firstGroup = document. getElementsByClassName ("groupFirst ");
// Second column of data
Var secondGroup = document. getElementsByClassName ("groupSecond ");
// Determine whether the verification information is valid
Var metadata = document. getElementsByClassName ("veritifyMessage ");
// Alert (secondGroup. item (0). value );
// Judge whether it is null
For (var I = 0; I <firstGroup. length; I ++)
{
// Determines whether the first column of data is null. If it is null, a prompt is displayed.
If (firstGroup [I]. value = "")
{
Using blocks [(I * 2)]. style. display = "block ";
Flag = true;
}
// Determines whether the second column of data is empty. If it is null, a prompt is displayed.
If (secondGroup [I]. value = "")
{
Using blocks [(I * 2 + 1)]. style. display = "block ";
Flag = true;
}
}
For (var I = 0; I <callback failed. length; I ++)
{
If (partition parameters [I]. style. display = "block ")
{
Flag = true;
}
}
// Alert (gradient. length );
// If all input information is valid, the current information is sorted as an array and the information is returned for processing.
If (flag = false ){
// Write
Var txtName = document. getElementById ("txtName"). value;
// Create an array
Var dtb = new Array ();
// Write data to the array in a loop and return
For (var I = 0; I <firstGroup. length; I ++ ){
Var row = new Object ();
Row. Name = txtName;
Row. fullMoney = firstGroup [I]. value;
Row. discount = secondGroup [I]. value;
Dtb. push (row );
}
Return dtb;
}

The verification here is relatively simple. It only verifies whether the input in the text box is empty and whether it is a number. It uses the display and hiding of a label to determine whether the input meets the requirements, in the next article, I will write how to import arrays to the background and write them into the database.