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

　　如下图所示：

　　源代码如下：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　//进行数据验证

　　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>

　　<tr>

　　图书名称

　　</td>

　　版本

　　</td>

　　数量（本）

　　</td>

　　图书作者

　　</td>

　　出版社

　　</td>

　　</tr>

　　<tr>

　　</td>

　　</td>

　　</td>

　　</td>

　　</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>

教程首页更多教程