jquery 的使用 (demo) 时间 日期 不为空 全选 添加 删除的判断和操作 ( 失焦方法)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>
//验证账号不能为空
function isnull(){
var v=$("#name").val();
var va=v.length;
if(va>=3&&va<=10){
return true;
}else{
alert("用户名长度不够")
return false;
}
}
//生日日期不能为空
function isdate(){
var v=$("#sheng").val()
if(v!=null&&v.trim()!=""){
return true;
}else{
alert("生日日期不能为空")
return false;
}
}
//主验证
function yan(){
return isnull()&&isdate();
}
//添加的方法
var index=1;
function add(){
if(yan()){
var _tr;
//改变每个tr 的颜色
if(index%2==0){
_tr="<tr align='center' class='tr1' >"
}else{
_tr="<tr align='center' class='tr2' >"
}
//获取到值
var v=$("#sel option:selected").val()
var newname=$("#name").val()
var newsheng=$("#sheng").val()
$(_tr+"<td><input type='checkbox' /></td><td>"+newname+"</td><td>"+v+"</td><td>"+newsheng+"</td><td><input type='button' value='删除' id='sc"+index+"'/></td></tr>").appendTo("#myta")
//删除操操作
$("#sc"+index).click(function(){
$(this).parent().parent().remove()
})
//全选
$("#ch").click(function(){
$("input[type='checkbox']").attr("checked",this.checked)
})
index++;
}
}
//时间
function settime(){
var v=new Date();
var va=v.toLocaleString();
$("#tim").val(va);
}
//1秒后重新调用方法
setInterval(settime,1000);
</script>
<!--样式-->
<style>
.tr1{
background-color: red;
}
.tr2{
background-color: goldenrod;
}
</style>
</head>
<body>
<center>
<input type="text" id="tim"/><br />
姓名:<input type="text" id="name" onblur="isnull()"/>
性比:<select id="sel">
<option value="男" selected="true">男</option>
<option value="女">女</option>
</select>
生日:<input type="date" id="sheng" onblur="isdate()" />
<input type="button" value="添加" onclick="add()" style="background-color: lawngreen; width:70px; height: 30px;"/>
<table border="1" width="500px" id="myta">
<tr>
<th><input type="checkbox" id="ch" /></th><th>姓名</th><th>性别</th><th>生日</th><th>删除</th>
</tr>
</table>
</center>
</body>
</html>

<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>
//验证账号不能为空
function isnull(){
var v=$("#name").val();
var va=v.length;
if(va>=3&&va<=10){
return true;
}else{
alert("用户名长度不够")
return false;
}
}
//生日日期不能为空
function isdate(){
var v=$("#sheng").val()
if(v!=null&&v.trim()!=""){
return true;
}else{
alert("生日日期不能为空")
return false;
}
}
//主验证
function yan(){
return isnull()&&isdate();
}
//添加的方法
var index=1;
function add(){
if(yan()){
var _tr;
//改变每个tr 的颜色
if(index%2==0){
_tr="<tr align='center' class='tr1' >"
}else{
_tr="<tr align='center' class='tr2' >"
}
//获取到值
var v=$("#sel option:selected").val()
var newname=$("#name").val()
var newsheng=$("#sheng").val()
$(_tr+"<td><input type='checkbox' /></td><td>"+newname+"</td><td>"+v+"</td><td>"+newsheng+"</td><td><input type='button' value='删除' id='sc"+index+"'/></td></tr>").appendTo("#myta")
//删除操操作
$("#sc"+index).click(function(){
$(this).parent().parent().remove()
})
//全选
$("#ch").click(function(){
$("input[type='checkbox']").attr("checked",this.checked)
})
index++;
}
}
//时间
function settime(){
var v=new Date();
var va=v.toLocaleString();
$("#tim").val(va);
}
//1秒后重新调用方法
setInterval(settime,1000);
</script>
<!--样式-->
<style>
.tr1{
background-color: red;
}
.tr2{
background-color: goldenrod;
}
</style>
</head>
<body>
<center>
<input type="text" id="tim"/><br />
姓名:<input type="text" id="name" onblur="isnull()"/>
性比:<select id="sel">
<option value="男" selected="true">男</option>
<option value="女">女</option>
</select>
生日:<input type="date" id="sheng" onblur="isdate()" />
<input type="button" value="添加" onclick="add()" style="background-color: lawngreen; width:70px; height: 30px;"/>
<table border="1" width="500px" id="myta">
<tr>
<th><input type="checkbox" id="ch" /></th><th>姓名</th><th>性别</th><th>生日</th><th>删除</th>
</tr>
</table>
</center>
</body>
</html>