javascript对talbe进行动态添加、删除、验证实现代码_javascript技巧



如下图所示：


源代码如下：
代码如下:





//进行数据验证
function ValidateForm() {
var booknamelist = document.getElementsByName("BookName");
var bookversionlist = document.getElementsByName("Version");
var booknumlist = document.getElementsByName("BookNum");
for (var i = 0; i < booknamelist.length; i++) {
var bookname = booknamelist[i].value;
var bookversion = bookversionlist[i].value;
var booknum = booknumlist[i].value;
if (bookname == "") {
alert("第" + (i + 1) + "行的图书名称不能为空！");
return false;
}
if (bookversion == "") {
alert("第" + (i + 1) + "行的图书版本不能为空！");
return false;
}
if (booknum == "") {
alert("第" + (i + 1) + "行的图书数量不能为空！");
return false;
}
if (isNaN(booknum)) {
alert("第" + (i + 1) + "行的图书数量输入的不正确！");
return false;
}
}
return true;
}
var rowNum = 2;
//添加一行
function AddRow() {
var myTable = document.getElementByIdx_x("myTable");
var newTr = myTable.insertRow(rowNum);
var newTd1 = newTr.insertCell(0);
newTd1.setAttribute("align", "center");
newTd1.innerHTML = '';
var newTd2 = newTr.insertCell(1);
newTd2.setAttribute("align", "center");
newTd2.innerHTML = '';
var newTd3 = newTr.insertCell(2);
newTd3.setAttribute("align", "center");
newTd3.innerHTML = '';
var newTd4 = newTr.insertCell(3);
newTd4.setAttribute("align", "center");
newTd4.innerHTML = '';
var newTd5 = newTr.insertCell(4);
newTd5.setAttribute("align", "center");
newTd5.innerHTML = '';
rowNum++;
}
//删除最后一行
function DeleteRow() {
var myTable = document.getElementByIdx_x("myTable");
if (rowNum > 1) {
myTable.deleteRow(rowNum-1);
rowNum--;
}
}

图书名称	版 本	数量（本）	图书作者	出版社

onclick="DeleteRow()" />