JS新增刪除一組文字方塊並對輸入資訊加以驗證判斷其正確性_javascript技巧

在做專案中遇到這樣一個問題，就是我們需要添加幾組資料到資料庫，但是具體幾組資料不確定，有客戶來填寫，例如我們需要添加打折策略，可能個策略有很多組方案，例如“滿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元： *';
r.insertCell(1).innerHTML = '打折率： *';

r.insertCell(2).innerHTML = '';
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 //取得行的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(""First")
//第二列資料
var secondGroup = document.getElementsByClassName("groupSecond");
//判斷驗證資訊是否合法
var veritify = document.getElementsByClassName("veritifyMessage")
// alert(secondGroup.item(0).value);
//判斷是否為空
for (var i = 0; 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 {
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 var row = new Object();
row.Name = txtName;
row.fullMoney = firstGroup[i].value;
row.discount = secondGroup[i].value;
dtb.push(row);
}
return dtb;
}

這裡的驗證也相對比較簡單，只是驗證文字方塊輸入是否為空和是否為數字，用一個label的顯示和隱藏來判斷是否符合輸入，在下篇文章中會寫道如何把數組傳入後台並寫入資料庫。