JS添加刪除一組文本框并對輸入信息加以驗證判斷其正確性

更新時間：2013年04月11日 15:57:24 作者：

需要添加幾組數(shù)據(jù)到數(shù)據(jù)庫，但是具體幾組數(shù)據(jù)不確定，有客戶來填寫，所以，這里我用JS進行添加刪除子方案，并要對方案輸入的正確性加以判斷，感興趣的朋友可以了解下

在做項目中遇到這樣一個問題，就是我們需要添加幾組數(shù)據(jù)到數(shù)據(jù)庫，但是具體幾組數(shù)據(jù)不確定，有客戶來填寫，比如我們需要添加打折策略，可能個策略有很多組方案，比如“滿100打5折，滿200打4折，滿500打3折”等等，這是作為一組方案來執(zhí)行的，但是并不確定一組方案中有幾個子方案，所以，這里我用JS進行添加刪除子方案，并要對方案輸入的正確性加以判斷，并且通過json傳輸寫入數(shù)據(jù)庫，這里我們主要寫如果添加刪除一組子項目和如果給每個文本框添加驗證。

動態(tài)添加一組文本框：

復制代碼代碼如下:

 
var countTable = 0; 
//添加表格行 
addTable = function () { 
//獲得表格 
var tab1 = document.getElementById("discountTable"); 
//table中所有的單元格數(shù) 
// cell = tab1.cells.length; 
//table 中行數(shù) 
n = tab1.rows.length; 
//table 中的列數(shù) 
//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"); 
//循環(huán)判斷需要刪除的行 
for (i = 0; i < tab1.rows.length; i++) { 
//獲取行的ID 
var deleteValue = tab1.rows[i].cells[2].childNodes[0].id; 
//循環(huán)獲得每行的id與當前點擊的ID比較，相同則刪除 
if (el.id == deleteValue) { 
tab1.deleteRow(i); 
break; 
} 
} 
} 

首先我們需要是或許要刪除行的位置，這里就需要通過循環(huán)對比表格中哪一行是當前點中行，然后進行刪除。
如何顯示和隱藏驗證控件（當焦點離去文本時，對文本進行判斷）：

復制代碼代碼如下:

 
//驗證第一條信息輸入是否合法 
terifyNumFirst = function (objText) { 
var terifyText = objText.value; 
//信息不能為空 
if (terifyText== "") 
{ 
objText.parentNode.children[1].style.display="block"; 
return; 
} 
//信息必須為數(shù)字 
if (isNaN(terifyText)) 
{ 
objText.parentNode.children[1].style.display = "block"; 
return; 
} 
objText.parentNode.children[1].style.display = "none"; 
} 

當全部信息需要寫入時，我們同樣需要進行判斷，如果有不合法的提示，否則生成datatable返回，具體如何往后臺傳輸，會在下篇博客中寫道。

復制代碼代碼如下:

 
//生成DataTable對象 
function generateDtb() { 
//判斷數(shù)據(jù)是否可以寫入標志，false為可以寫入，true為不可以寫入 
var flag = false; 
//獲取table 
var tab1 = document.getElementById("discountTable"); 
//第一列數(shù)據(jù) 
var firstGroup = document.getElementsByClassName("groupFirst"); 
//第二列數(shù)據(jù) 
var secondGroup = document.getElementsByClassName("groupSecond"); 
//判斷驗證信息是否合法 
var veritify = document.getElementsByClassName("veritifyMessage"); 
// alert(secondGroup.item(0).value); 
//判斷是否為空 
for (var i = 0; i < firstGroup.length; i++) 
{ 
//判斷第一列數(shù)據(jù)是否為空，為空則顯示提示 
if (firstGroup[i].value == "") 
{ 
veritify[(i * 2)].style.display = "block"; 
flag = true; 
} 
//判斷第二列數(shù)據(jù)是否為空，為空則顯示提示 
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); 
//如何輸入信息都合法，則整理當前信息為數(shù)組，返回該信息進行處理。 
if (flag == false) { 
//寫入 
var txtName = document.getElementById("txtName").value; 
//創(chuàng)建數(shù)組 
var dtb = new Array(); 
//通過循環(huán)把數(shù)據(jù)寫入到數(shù)組并返回 
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; 
} 