验证信息添加到表格中
来源:互联网 发布:seo推广学院 编辑:程序博客网 时间:2024/05/20 12:46
<!DOCTYPE html>
<html>
<head>
<!--
作者:1102780712@qq.com
时间:2017-08-07
思路分析:当我点击添加的时候,第一步先验证,验证通过后,才通过操作dom将数据添加到table表格中展示
1.先完成js验证
2.通过dom给table中添加我们输入的数据
-->
<script type="text/javascript">
function add(){
clearSpan();
//给定一个标识符
var flag = true;
//获取名称中的值,判断是否为空
var nameValue = document.getElementById("iname").value;
var priceValue = document.getElementById("iprice").value;
var countValue = document.getElementById("icount").value;
//判断名称是否为空
if(nameValue == null || nameValue.trim()== "" ){
flag = false;//如果验证失败,第一:flag 设置为false 第二给span中给提示
document.getElementById("sname").innerHTML = "<font color='red'>不能为空</font>";
}
//价格在30-60
if(!(priceValue >= 30 && priceValue <=60)){
flag = false;//如果验证失败,第一:flag 设置为false 第二给span中给提示
document.getElementById("sprice").innerHTML = "<font color='red'>价格必须在30-60之间</font>";
}
//场次不能为空
if(countValue == null || countValue.trim()== "" ){
flag = false;//如果验证失败,第一:flag 设置为false 第二给span中给提示
document.getElementById("scount").innerHTML = "<font color='red'>场次不能为空</font>";
}
/*
思路:
我们调用add方法会返回一个boolean值,如果是true,则通过验证,
如果是false则没有通过验证; 通过验证的我们在table中才添加,不通过验证,我们不做任何事情,他本身有红色的错误提示
*/
if(flag){
//1.创建tr
var tr = document.createElement("tr");
//2.创建4个td
var td1 = document.createElement("td");
td1.innerHTML= document.getElementById("iname").value;
var td2 = document.createElement("td");
td2.innerHTML= document.getElementById("iprice").value;
var td3 = document.createElement("td");
td3.innerHTML= document.getElementById("icount").value;
var td4 = document.createElement("td");
var date = new Date();
td4.innerHTML= date.toLocaleString();
//把td放到父节点tr中
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
//tr放到父节点table中
document.getElementById("tab").appendChild(tr);
}
}
//清除span标签里面的数据
function clearSpan(){
var arr = document.getElementsByTagName("span");
for(var i = 0; i < arr.length; i++){
arr[i].innerHTML = "";
}
}
</script>
</head>
<body>
<table align="center" >
<tr>
<td>
名称:<input type="text" id="iname" name="uname" />
<span id="sname" ></span>
</td>
</tr>
<tr>
<td>
价格:<input type="text" id="iprice" name="uprice" />
<span id="sprice"></span>
</td>
</tr>
<tr>
<td>
场次:<input type="text" id="icount" name="ucount" />
<span id="scount"></span>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="添加" onclick="add()" />
</td>
</tr>
</table >
<hr width="35%"/>
<table align="center" width="30%" cellspacing="0" border="1px" id="tab">
<tr>
<th>名称</th>
<th>价格</th>
<th>场次</th>
<th>日期</th>
</tr>
</table>
</body>
</html>
<html>
<head>
<!--
作者:1102780712@qq.com
时间:2017-08-07
思路分析:当我点击添加的时候,第一步先验证,验证通过后,才通过操作dom将数据添加到table表格中展示
1.先完成js验证
2.通过dom给table中添加我们输入的数据
-->
<script type="text/javascript">
function add(){
clearSpan();
//给定一个标识符
var flag = true;
//获取名称中的值,判断是否为空
var nameValue = document.getElementById("iname").value;
var priceValue = document.getElementById("iprice").value;
var countValue = document.getElementById("icount").value;
//判断名称是否为空
if(nameValue == null || nameValue.trim()== "" ){
flag = false;//如果验证失败,第一:flag 设置为false 第二给span中给提示
document.getElementById("sname").innerHTML = "<font color='red'>不能为空</font>";
}
//价格在30-60
if(!(priceValue >= 30 && priceValue <=60)){
flag = false;//如果验证失败,第一:flag 设置为false 第二给span中给提示
document.getElementById("sprice").innerHTML = "<font color='red'>价格必须在30-60之间</font>";
}
//场次不能为空
if(countValue == null || countValue.trim()== "" ){
flag = false;//如果验证失败,第一:flag 设置为false 第二给span中给提示
document.getElementById("scount").innerHTML = "<font color='red'>场次不能为空</font>";
}
/*
思路:
我们调用add方法会返回一个boolean值,如果是true,则通过验证,
如果是false则没有通过验证; 通过验证的我们在table中才添加,不通过验证,我们不做任何事情,他本身有红色的错误提示
*/
if(flag){
//1.创建tr
var tr = document.createElement("tr");
//2.创建4个td
var td1 = document.createElement("td");
td1.innerHTML= document.getElementById("iname").value;
var td2 = document.createElement("td");
td2.innerHTML= document.getElementById("iprice").value;
var td3 = document.createElement("td");
td3.innerHTML= document.getElementById("icount").value;
var td4 = document.createElement("td");
var date = new Date();
td4.innerHTML= date.toLocaleString();
//把td放到父节点tr中
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
//tr放到父节点table中
document.getElementById("tab").appendChild(tr);
}
}
//清除span标签里面的数据
function clearSpan(){
var arr = document.getElementsByTagName("span");
for(var i = 0; i < arr.length; i++){
arr[i].innerHTML = "";
}
}
</script>
</head>
<body>
<table align="center" >
<tr>
<td>
名称:<input type="text" id="iname" name="uname" />
<span id="sname" ></span>
</td>
</tr>
<tr>
<td>
价格:<input type="text" id="iprice" name="uprice" />
<span id="sprice"></span>
</td>
</tr>
<tr>
<td>
场次:<input type="text" id="icount" name="ucount" />
<span id="scount"></span>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="添加" onclick="add()" />
</td>
</tr>
</table >
<hr width="35%"/>
<table align="center" width="30%" cellspacing="0" border="1px" id="tab">
<tr>
<th>名称</th>
<th>价格</th>
<th>场次</th>
<th>日期</th>
</tr>
</table>
</body>
</html>
阅读全文
0 0
- 验证信息添加到表格中
- jquery表单验证添加到表格再删除easyNew
- 添加信息组建表格
- JavaScript中获取表单信息并添加在表格中
- 添加数据到表格
- URL 添加验证信息
- AngularJS:模糊查询过滤内容,验证判断后添加表格信息
- 将表格数据添加到rtf文件中
- Java读取excel表格添加到Jtable中
- visio中添加表格
- 复制表格,添加到剪贴板
- ASP.NET2.0中Login控件中添加其他验证信息(如:验证码)
- ASP.NET2.0中Login控件中添加其他验证信息(如:验证码)
- 将MenuStrip控件中的信息添加到treeView控件中
- 将tomcat7添加到linux服务中 查看JVM信息
- 将信息添加到指定的文本文件中
- 将tomcat7添加到linux服务中 查看JVM信息
- 2. AngularJs+JQuery:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息
- 集合小结
- IIS发表
- java--Demo1
- javaweb学习路线
- ARMv8-a架构简介
- 验证信息添加到表格中
- C# 字典 dictionary
- Memcached 在linux与windows下的安装
- IIC读取AT24C256数据出现的问题及解析
- debian的初始化操作
- 求回型存储的二维数组中任意位置的(java long范围内)元素值的数学算法分析及java实现
- 《大话设计模式》num01---简单工厂模式
- UE4 C++使用正则表达式
- Ocelot API网关的实现剖析