As shown in the following illustration:
The source code is as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<script type= "Text/javascript" >
Perform data validation
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 = = "") {
The book Name of alert ("the" + (i + 1) + "line cannot be empty!" ");
return false;
}
if (bookversion = = "") {
Alert ("First" + (i + 1) + "The book version of the row cannot be empty!" ");
return false;
}
if (Booknum = = "") {
Alert ("First" + (i + 1) + "The number of books can not be empty!" ");
return false;
}
if (isNaN (Booknum)) {
Alert ("No." + (i + 1) + "row of the number of books entered incorrectly!" ");
return false;
}
}
return true;
}
var rownum = 2;
Add a row
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++;
}
Delete last line
function DeleteRow () {
var myTable = document.getelementbyidx_x ("myTable");
if (RowNum > 1) {
Mytable.deleterow (rowNum-1);
rownum--;
}
}
</script>
<body>
<table id= "myTable" cellspacing= "0px" cellpadding= "2px" width= "700px" >
<tr>
<TD align= "center" style= "color: #006699; Font-weight:bold; " >
Book Name
</td>
<TD align= "center" style= "color: #006699; Font-weight:bold; " >
Version
</td>
<TD align= "center" style= "color: #006699; Font-weight:bold; " >
Quantity (This)
</td>
<TD align= "center" style= "color: #006699; Font-weight:bold; " >
Book author
</td>
<TD align= "center" style= "color: #006699; Font-weight:bold; " >
Press
</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= "Add book" onclick= "AddRow ()"/><input type= "button" value= "delete book"
Onclick= "DeleteRow ()"/><input type= "button" value= "Submit" onclick= "Validateform ()"/></div>
</body>