JS adds and deletes a group of text boxes and verifies the input information to determine its correctness_javascript skills

We encountered such a problem during the project, that is, we need to add several sets of data to the database, but the specific sets of data are not sure and have to be filled in by customers. For example, we need to add a discount strategy. There may be many sets of plans for each strategy, such as " 50% off for purchases over 100, 40% off for purchases over 200, 30% off for purchases over 500, etc. This is implemented as a set of plans, but it is not certain how many sub-plans there are in a set of plans, so here I use JS Add and delete sub-schemes, and judge the correctness of the scheme input, and write it to the database through json transmission. Here we mainly write how to add and delete a group of sub-projects and how to add verification to each text box.

Dynamicly add a group of text boxes:

Copy the code The code is as follows:

var countTable = 0;
//Add table rows
addTable = function () {
//Get the table
var tab1 = document.getElementById("discountTable");
// The number of all cells in the table
// cell = tab1.cells.length;
//The number of rows in the table
n = tab1.rows.length;
//The number of columns in the table
//cell = cell / n;
//Add a row to the table
r = tab1.insertRow(n);
//Add each cell of the current row
r. insertCell(0).innerHTML = 'Spend X yuan: *';
r.insertCell(1).innerHTML = 'Discount rate:*';
r.insertCell(2).innerHTML = '';
countTable = countTable 1;
}

Note:
1. The countTable here should be all variables, used to identify each row, so as to ensure that each row is different and prevent duplicate IDs after deleting a row. Condition.
2. A focus leaving event is added here for each text, that is, when the focus leaves the current text box, we need to determine whether it matches the input.
3. A label is added after the text box as a verification control. When the text we enter does not meet the requirements, the label will be visible.
Delete any line:

Copy code The code is as follows:

//Delete the current line
deleteTable = function (el) {
// alert( el.id);
//Get table
var tab1 = document.getElementById("discountTable");
//Loop Determine the rows that need to be deleted
for (i = 0; i < tab1.rows.length; i ) {
//Get the ID of the row
var deleteValue = tab1.rows[i].cells[ 2].childNodes[0].id;
//Loop to get the id of each row and compare it with the currently clicked ID. If they are the same, delete them
if (el.id == deleteValue) {
tab1.deleteRow (i);
break; One line is the line in the current point, and then deleted.
How to show and hide validation controls (judge the text when the focus leaves the text):

Copy code

Code As follows: //Verify whether the first information input is legal terifyNumFirst = function (objText) { var terifyText = objText.value; //The information cannot be empty

if (terifyText== "")

{
objText.parentNode.children[1].style.display="block";
return;
}
//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 information needs to be written, we also need to make a judgment. If there is an illegal prompt, Otherwise, the datatable is generated and returned. The specific method of transmitting it to the background will be written in the next blog.

Copy code

The code is as follows:

//Generate DataTable object
function generateDtb() {
//Determine whether the data can be written to the flag, false means it can be written, true means it cannot be written
var flag = false;
//Get table
var tab1 = document.getElementById("discountTable");
//First column data
var firstGroup = document.getElementsByClassName("groupFirst");
//Second column data
var secondGroup = document.getElementsByClassName("groupSecond");
//Determine whether the verification information is legal
var veritify = document.getElementsByClassName("veritifyMessage");
// alert(secondGroup.item(0).value);
//Determine whether it is empty
for (var i = 0; i < firstGroup.length; i )
{
/ /Determine whether the first column of data is empty. If it is empty, display the prompt
if (firstGroup[i].value == "")
{
veritify[(i * 2)].style.display = "block";
flag = true;
}
//Determine whether the second column of data is empty. If it is empty, a prompt will be displayed
if (secondGroup[i].value == "" )
{
veritify[(i * 2 1)].style.display = "block";
flag = true;
}
}
for (var i = 0 ; i < veritify.length; i )
{
if (veritify[i].style.display == "block")
{
flag = true;
}
}
// alert(veritify.length);
//Any information entered is legal, then the current information is organized into an array and the information is returned for processing.
if (flag == false) {
//Write
var txtName = document.getElementById("txtName").value;
//Create array
var dtb = new Array ();
//Write data to the array through 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 also relatively simple. It just verifies whether the text box input is empty and whether it is a number, and uses the display and hiding of a label to determine whether According to the input, I will write in the next article how to pass the array into the background and write it to the database.