时间:2021-05-26
如下图所示:
源代码如下:
复制代码 代码如下:
<!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>
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了JqueryeasyUi表单验证实现代码,供大家参考,具体内容如下BasicForm-jQueryEasyUIDemo基本表单Fillthe
表格部分代码如下:第一行第二行第三行动态添加表行的javascript函数如下:functionaddRow(){//添加一行varnewTr=testTbl.
本文实例讲述了JavaScript数组,JSON对象实现动态添加、修改、删除功能。分享给大家供大家参考,具体如下:javascript里面的数组,json对象,
最近要做的东西,是对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证。$(function(){//获取表格的行数vartabRowLen=$("ta
bootstrap中的bootstrapValidator可以对前端的数据进行验证,但是有的时候我们需要动态的添加验证,这样需要我们动态的对bootstrapV