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

时间：2021-03-31 09:13:47|栏目：JavaScript代码|点击：次

如下图所示：

源代码如下：

 
<!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"> 
 
//进行数据验证 
 
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 = '<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;"> 
 
数量（本） 
 
</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>

上一篇：根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码

栏目：JavaScript代码

下一篇：鼠标放上去则向上向下滚动的代码

本文标题：javascript对talbe进行动态添加、删除、验证实现代码

本文地址：http://www.codeinn.net/misctech/91725.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程