javascript對talbe進行動態(tài)添加、刪除、驗證實現(xiàn)代碼

更新時間：2012年03月29日 01:37:15 作者：

javascript對talbe進行動態(tài)添加、刪除、驗證實現(xiàn)代碼，需要的朋友可以參考下

如下圖所示：

源代碼如下：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script type="text/javascript"> 
//進行數(shù)據(jù)驗證 
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) + "行的圖書數(shù)量不能為空！"); 
return false; 
} 
if (isNaN(booknum)) { 
alert("第" + (i + 1) + "行的圖書數(shù)量輸入的不正確！"); 
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 = '<input type="text" name="BookName" style="width:200px">'; 
var newTd2 = newTr.insertCell(1); 
newTd2.setAttribute("align", "center"); 
newTd2.innerHTML = '<input type="text" name="Version" style="width: 120px" />'; 
var newTd3 = newTr.insertCell(2); 
newTd3.setAttribute("align", "center"); 
newTd3.innerHTML = '<input type="text" name="BookNum" style="width: 56px" />'; 
var newTd4 = newTr.insertCell(3); 
newTd4.setAttribute("align", "center"); 
newTd4.innerHTML = '<input type="text" name="BookAuthor" style="width: 70px" />'; 
var newTd5 = newTr.insertCell(4); 
newTd5.setAttribute("align", "center"); 
newTd5.innerHTML = '<input type="text" name="BookPress" style="width: 102px" />'; 
rowNum++; 
} 
//刪除最后一行 
function DeleteRow() { 
var myTable = document.getElementByIdx_x("myTable"); 
if (rowNum > 1) { 
myTable.deleteRow(rowNum-1); 
rowNum--; 
} 
} 
</script> 
</head> 
<body> 
<table id="myTable" cellspacing="0px" cellpadding="2px" width="700px"> 
<tr> 
<td align="center" style="color: #006699; font-weight: bold;"> 
圖書名稱 
</td> 
<td align="center" style="color: #006699; font-weight: bold;"> 
版 本 
</td> 
<td align="center" style="color: #006699; font-weight: bold;"> 
數(shù)量（本） 
</td> 
<td align="center" style="color: #006699; font-weight: bold;"> 
圖書作者 
</td> 
<td align="center" style="color: #006699; font-weight: bold;"> 
出版社 
</td> 
</tr> 
<tr> 
<td align="center"> 
<input name="BookName" type="text" style="width: 200px" /> 
</td> 
<td align="center"> 
<input type="text" name="Version" style="width: 120px" /> 
</td> 
<td align="center"> 
<input type="text" name="BookNum" style="width: 56px" /> 
</td> 
<td align="center"> 
<input type="text" name="BookAuthor" style="width: 70px" /> 
</td> 
<td align="center"> 
<input type="text" name="BookPress" style="width: 102px" /> 
</td> 
</tr> 
</table> 
<div> 
<input type="button" value="添加圖書" onclick="AddRow()" /><input type="button" value="刪除圖書" 
onclick="DeleteRow()" /><input type="button" value="提交" onclick="ValidateForm()" /></div> 
</body> 
</html> 