<!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="添加" οnclick="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="添加" οnclick="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>