There is a problem in doing the project, is that we need to add a few sets of data to the database, but the specific set of data is not sure, there are customers to fill out, such as we need to add a discount strategy, there may be a number of strategies, such as "full 100 dozen 50 percent, 200 dozen 40 percent, 500 dozen 30 percent" and so on This is performed as a set of scenarios, but it is not certain that there are several subcategories in a set of scenarios, so here I add the delete sub scheme with JS and judge the correctness of the input of the scheme, and write the data to the database via JSON transfer. Here we mainly write if adding deletes a group of subprojects and if you add validation to each text box.
To add a set of text boxes dynamically:
Copy Code code as follows:
var counttable = 0;
Add Table row
addtable = function () {
Get a table
var tab1 = document.getElementById ("discounttable");
The number of cells in the table
cell = Tab1.cells.length;
Number of rows in table
n = tab1.rows.length;
Number of columns in 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 = ' consumption full x: <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, so that each row is determined differently, preventing the deletion of duplicate IDs after a row.
2. Here you add the Focus departure event for each text, that is, when the focus leaves the current text box, we need to seriously conform to the input.
3. A label is added to the text box as a validation control, which is visible when the text we enter does not meet the requirements.
Delete any row:
Copy Code code as follows:
Delete When moving forward
deletetable = function (EL) {
alert (el.id);
Get table
var tab1 = document.getElementById ("discounttable");
Loops to determine which rows 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 gets the ID of each row compared with the ID of the current click, the same is deleted
if (el.id = = DeleteValue) {
Tab1.deleterow (i);
Break
}
}
}
The first thing we need to do is perhaps to delete the position of the row, where we need to loop through to compare which row in the table is the current point, and then delete it.
How to display and hide validation controls (judge the text when the focus leaves the text):
Copy Code code as follows:
Verify that the first piece of information is entered legally
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 the information needs to be written, we also need to make a judgment, if there is an illegal hint, otherwise generate DataTable return, specific how to transfer back to the table, will be in the next blog post.
Copy Code code as follows:
Generating a DataTable Object
function Generatedtb () {
To determine if the data can be written to the flag, false to write, true to not be writable
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 if validation information is legal
var veritify = document.getelementsbyclassname ("Veritifymessage");
Alert (Secondgroup.item (0). value);
To determine if it is empty
for (var i = 0; i < firstgroup.length; i++)
{
To determine whether the first column data is empty, or null to display the prompt
if (Firstgroup[i].value = "")
{
veritify[(i * 2)].style.display = "block";
Flag = true;
}
To determine whether the second column of data is empty, or null to display the prompt
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);
How to enter information is legal, 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 an array
var dtb = new Array ();
Writes data to an array by looping and returns
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, just to verify that the text box input is empty and whether it is a number, with a label display and hide to determine whether the input, in the next article will write how to pass the array into the background and write to the database.
