javascript对talbe进行动态添加、删除、验证

如下图所示：

源代码如下：

<!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;

补充：web前端 , JavaScript ,