在做項目中遇到這樣一個問題，就是我們需要添加幾組數據到數據庫，但是具體幾組數據不確定，有客戶來填寫，比如我們需要添加打折策略，可能個策略有很多組方案，比如“滿100打5折，滿200打4折，滿500打3折”等等，這是作為一組方案來執行的，但是並不確定一組方案中有幾個子方案，所以，這裡我用JS進行添加刪除子方案，並要對方案輸入的正確性加以判斷，並且通過json傳輸寫入數據庫，這裡我們主要寫如果添加刪除一組子項目和如果給每個文本框添加驗證。
動態添加一組文本框：
復制代碼 代碼如下:
var countTable = 0;
//添加表格行
addTable = function () {
//獲得表格
var tab1 = document.getElementById("discountTable");
//table中所有的單元格數
// cell = tab1.cells.length;
//table 中行數
n = tab1.rows.length;
//table 中的列數
//cell = cell / n;
//向table中加入行
r = tab1.insertRow(n);
//添加當前行的每個單元格
r.insertCell(0).innerHTML = '消費滿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 = '打折率：<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;
}
注：
1.這裡的countTable應為全部變量，用於對每一行進行標識，這樣就確定每一行都是不同的，防止刪除一行後ID重復的情況。
2.在這裡為每一個text添加了焦點離去事件，即當焦點離開當前文本框時，我們需要對其嚴重是否符合輸入。
3.在文本框後加了label，作為驗證控件，當我們輸入的文本不符合要求時，該label可見。
刪除任意一行：
復制代碼 代碼如下:
//刪除當前行
deleteTable = function (el) {
// alert( el.id);
//獲取table
var tab1 = document.getElementById("discountTable");
//循環判斷需要刪除的行
for (i = 0; i < tab1.rows.length; i++) {
//獲取行的ID
var deleteValue = tab1.rows[i].cells[2].childNodes[0].id;
//循環獲得每行的id與當前點擊的ID比較，相同則刪除
if (el.id == deleteValue) {
tab1.deleteRow(i);
break;
}
}
}
首先我們需要是或許要刪除行的位置，這裡就需要通過循環對比表格中哪一行是當前點中行，然後進行刪除。
如何顯示和隱藏驗證控件（當焦點離去文本時，對文本進行判斷）：
復制代碼 代碼如下:
//驗證第一條信息輸入是否合法
terifyNumFirst = function (objText) {
var terifyText = objText.value;
//信息不能為空
if (terifyText== "")
{
objText.parentNode.children[1].style.display="block";
return;
}
//信息必須為數字
if (isNaN(terifyText))
{
objText.parentNode.children[1].style.display = "block";
return;
}
objText.parentNode.children[1].style.display = "none";
}
當全部信息需要寫入時，我們同樣需要進行判斷，如果有不合法的提示，否則生成datatable返回，具體如何往後台傳輸，會在下篇博客中寫道。
復制代碼 代碼如下:
//生成DataTable對象
function generateDtb() {
//判斷數據是否可以寫入標志，false為可以寫入，true為不可以寫入
var flag = false;
//獲取table
var tab1 = document.getElementById("discountTable");
//第一列數據
var firstGroup = document.getElementsByClassName("groupFirst");
//第二列數據
var secondGroup = document.getElementsByClassName("groupSecond");
//判斷驗證信息是否合法
var veritify = document.getElementsByClassName("veritifyMessage");
// alert(secondGroup.item(0).value);
//判斷是否為空
for (var i = 0; i < firstGroup.length; i++)
{
//判斷第一列數據是否為空，為空則顯示提示
if (firstGroup[i].value == "")
{
veritify[(i * 2)].style.display = "block";
flag = true;
}
//判斷第二列數據是否為空，為空則顯示提示
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);
//如何輸入信息都合法，則整理當前信息為數組，返回該信息進行處理。
if (flag == false) {
//寫入
var txtName = document.getElementById("txtName").value;
//創建數組
var dtb = new Array();
//通過循環把數據寫入到數組並返回
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;
}
這裡的驗證也相對比較簡單，只是驗證文本框輸入是否為空和是否為數字，用一個label的顯示和隱藏來判斷是否符合輸入，在下篇文章中會寫道如何把數組傳入後台並寫入數據庫。