As shown in:
The source code is as follows:
Copy codeThe Code is as follows: <! 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">
// Perform data verification
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 name of the book in row alert ("no." + (I + 1) + "cannot be blank! ");
Return false;
}
If (bookversion = ""){
The Library version of alert ("no." + (I + 1) + "cannot be blank! ");
Return false;
}
If (booknum = ""){
The number of books in row alert ("no." + (I + 1) + "cannot be blank! ");
Return false;
}
If (isNaN (booknum )){
The number of books in row alert ("Number" + (I + 1) + "is incorrect! ");
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 the last row
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;">
Book name
</Td>
<Td align = "center" style = "color: #006699; font-weight: bold;">
Version
</Td>
<Td align = "center" style = "color: #006699; font-weight: bold;">
Quantity (local)
</Td>
<Td align = "center" style = "color: #006699; font-weight: bold;">
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>
</Html>
