When working on a project, we need to add several sets of data to the database, but the specific sets of data are uncertain. If a customer fills in it, for example, we need to add a discount strategy. There may be many sets of plans for each strategy, such as "50% off for every 100, 40% off for every 200, 30% off for every 500", etc. This is implemented as a set of plans, but it is not certain that there are several sub-schemes in a set of plans. Therefore, here I use JS to add and delete sub-schemes, and judge the correctness of the scheme input, and write to the database through json transmission. Here we mainly write if a set of sub-projects is added and deleted and if verification is added to each text box.
Dynamically add a set of text boxes:
var countTable = 0;
//Add table row
addTable = function () {
//Get the form
var tab1 = ("discountTable");
//The number of all cells in the table
// cell = ;
//table number of rows
n = ;
//The number of columns in table
//cell = cell / n;
//Add rows to the table
r = (n);
//Add each cell of the current row
(0).innerHTML = 'Spend over X yuan: <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>';
(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>';
(2).innerHTML = '<input type="image" name="imageField" onclick="deleteTable(this)" src="../images/" />';
countTable = countTable + 1;
}
Note:
1. The countTable here should be all variables, which are used to identify each row, so as to determine that each row is different, preventing the ID from being duplicated after deleting a row.
2. Here, we add a focus departure event for each text, that is, when the focus leaves the current text box, we need to make serious compliance with the input.
3. Add a label after the text box as a verification control. When the text we enter does not meet the requirements, the label is visible.
Delete any line:
//Delete the current line
deleteTable = function (el) {
// alert( );
//Get table
var tab1 = ("discountTable");
//Cycle to determine the rows that need to be deleted
for (i = 0; i < ; i++) {
//Get the row ID
var deleteValue = [i].cells[2].childNodes[0].id;
// Loop to get the id of each row compared with the ID of the current click, and delete the same
if ( == deleteValue) {
(i);
break;
}
}
}
First of all, we need to delete the row position. Here we need to loop through which row in the table is the row in the current point, and then delete it.
How to show and hide the verification control (judgment the text when the focus leaves the text):
//Verify whether the first information input is legal
terifyNumFirst = function (objText) {
var terifyText = ;
//The information cannot be empty
if (terifyText== "")
{
[1].="block";
return;
}
//The information must be a number
if (isNaN(terifyText))
{
[1]. = "block";
return;
}
[1]. = "none";
}
When all information needs to be written, we also need to make a judgment. If there is an illegal prompt, otherwise a datatable will be generated. How to transmit it to the background will be written in the next blog.
//Generate DataTable object
function generateDtb() {
//Judge whether the data can be written to the flag. False is writeable and true is not writeable.
var flag = false;
//Get table
var tab1 = ("discountTable");
//The first column of data
var firstGroup = ("groupFirst");
//The second column of data
var secondGroup = ("groupSecond");
//Judge whether the verification information is legal
var veritify = ("veritifyMessage");
// alert((0).value);
//Judge whether it is empty
for (var i = 0; i < ; i++)
{
//Display a prompt if the first column of data is empty.
if (firstGroup[i].value == "")
{
veritify[(i * 2)]. = "block";
flag = true;
}
//Display a prompt if the second column of data is empty.
if (secondGroup[i].value == "")
{
veritify[(i * 2 + 1)]. = "block";
flag = true;
}
}
for (var i = 0; i < ; i++)
{
if (veritify[i]. == "block")
{
flag = true;
}
}
// alert();
//It is legal to enter information, then sort the current information into an array and return the information for processing.
if (flag == false) {
//Write
var txtName = ("txtName").value;
//Create an array
var dtb = new Array();
//Write data to the array by looping and return
for (var i = 0; i < ; i++) {
var row = new Object();
= txtName;
= firstGroup[i].value;
= secondGroup[i].value;
(row);
}
return dtb;
}
The verification here is relatively simple, just verify whether the text box input is empty and whether it is a number. Use the display and hiding of a label to determine whether it meets the input. In the next article, we will write about how to pass the array into the background and write it to the database.
Dynamically add a set of text boxes:
Copy the codeThe code is as follows:
var countTable = 0;
//Add table row
addTable = function () {
//Get the form
var tab1 = ("discountTable");
//The number of all cells in the table
// cell = ;
//table number of rows
n = ;
//The number of columns in table
//cell = cell / n;
//Add rows to the table
r = (n);
//Add each cell of the current row
(0).innerHTML = 'Spend over X yuan: <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>';
(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>';
(2).innerHTML = '<input type="image" name="imageField" onclick="deleteTable(this)" src="../images/" />';
countTable = countTable + 1;
}
Note:
1. The countTable here should be all variables, which are used to identify each row, so as to determine that each row is different, preventing the ID from being duplicated after deleting a row.
2. Here, we add a focus departure event for each text, that is, when the focus leaves the current text box, we need to make serious compliance with the input.
3. Add a label after the text box as a verification control. When the text we enter does not meet the requirements, the label is visible.
Delete any line:
Copy the codeThe code is as follows:
//Delete the current line
deleteTable = function (el) {
// alert( );
//Get table
var tab1 = ("discountTable");
//Cycle to determine the rows that need to be deleted
for (i = 0; i < ; i++) {
//Get the row ID
var deleteValue = [i].cells[2].childNodes[0].id;
// Loop to get the id of each row compared with the ID of the current click, and delete the same
if ( == deleteValue) {
(i);
break;
}
}
}
First of all, we need to delete the row position. Here we need to loop through which row in the table is the row in the current point, and then delete it.
How to show and hide the verification control (judgment the text when the focus leaves the text):
Copy the codeThe code is as follows:
//Verify whether the first information input is legal
terifyNumFirst = function (objText) {
var terifyText = ;
//The information cannot be empty
if (terifyText== "")
{
[1].="block";
return;
}
//The information must be a number
if (isNaN(terifyText))
{
[1]. = "block";
return;
}
[1]. = "none";
}
When all information needs to be written, we also need to make a judgment. If there is an illegal prompt, otherwise a datatable will be generated. How to transmit it to the background will be written in the next blog.
Copy the codeThe code is as follows:
//Generate DataTable object
function generateDtb() {
//Judge whether the data can be written to the flag. False is writeable and true is not writeable.
var flag = false;
//Get table
var tab1 = ("discountTable");
//The first column of data
var firstGroup = ("groupFirst");
//The second column of data
var secondGroup = ("groupSecond");
//Judge whether the verification information is legal
var veritify = ("veritifyMessage");
// alert((0).value);
//Judge whether it is empty
for (var i = 0; i < ; i++)
{
//Display a prompt if the first column of data is empty.
if (firstGroup[i].value == "")
{
veritify[(i * 2)]. = "block";
flag = true;
}
//Display a prompt if the second column of data is empty.
if (secondGroup[i].value == "")
{
veritify[(i * 2 + 1)]. = "block";
flag = true;
}
}
for (var i = 0; i < ; i++)
{
if (veritify[i]. == "block")
{
flag = true;
}
}
// alert();
//It is legal to enter information, then sort the current information into an array and return the information for processing.
if (flag == false) {
//Write
var txtName = ("txtName").value;
//Create an array
var dtb = new Array();
//Write data to the array by looping and return
for (var i = 0; i < ; i++) {
var row = new Object();
= txtName;
= firstGroup[i].value;
= secondGroup[i].value;
(row);
}
return dtb;
}
The verification here is relatively simple, just verify whether the text box input is empty and whether it is a number. Use the display and hiding of a label to determine whether it meets the input. In the next article, we will write about how to pass the array into the background and write it to the database.