Html

最新推荐文章于 2025-04-15 12:02:49 发布

原创最新推荐文章于 2025-04-15 12:02:49 发布 · 168 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>
<head>
<script src="js/angular.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<meta charset="utf-8" />
<title></title>
<script>
function add(){
var f1=false;
var f2=false;

//判断姓名
var v_name=$("#name").val();
if(v_name==""){
alert("姓名不能为空");
f1=false;
}else if(v_name.length<3){
alert("姓名格式不正确");
f1=false;
}else{
f1=true;
}

//判断生日
var v_bir=$("#birthday").val();
if(v_bir==""){
alert("生日不能为空");
f2=false;
}else{
f2=true;
}
//得到值
var v_sex=$("#sex").val();
var v_city=$("#city").val();
var v_region=$("#region").val();
//判断姓名和生日是否同时成立
if(f1==false||f2==false){
alert("输入信息有误");
}else{
$(".table").append("<tr>" +
"<td><input type='checkbox' name='ck' ></td>" +
"<td>" + v_name +"</td>" +
"<td>" + v_sex +"</td>" +
"<td>" + v_bir +"</td>" +
"<td>" + v_city + "-" + v_region +"</td>" +
"<td><input type='button' onclick='return del(this)' value='删除'></td>" +
"</tr>");
}
}

function del(a){
var f=confirm("确认删除吗");
if(!f){
return;
}
a.parentNode.parentNode.remove();

}

function check(){
var v_che=$("#che")[0].checked;
var ck=$("input[name='ck']");
for(var i=0;i<ck.length;i++){
ck[i].checked=v_che;
}
}

function che(){
var cks=document.getElementsByName("ck");
for(var i=0;i<cks.length;i++){
cks[i].checked=!cks[i].checked;
}
}

// function dele(){
// var ck=$("input:checked[name='ck']");
// if(ck.length==0){
// alert("请选择,然后进行删除");
// return;
// }
// var f=confirm("确认删除!!");
// if(!f){
// return;
// }
// for(var i=0;i<ck.length;i++){
// ck[i].parentNode.parentNode.remove(;)
// }
// }

</script>

<style>
.big{
widows: 800px;
height: 600px;
text-align: center;
margin: 10px auto;
}
.table{
width: 400px;
height: 30px;
background: darkcyan;
margin: 0 auto;
}
</style>
</head>
<body ng-app="Liu" ng-controller="con">
<div class="big">
姓名:<input type="text" id="name"/>
性别:<select id="sex">
<option>男</option>
<option>女</option>
</select>
生日:<input type="date" id="birthday"/>
住址:<select id="city">
<option>北京</option>
<option>河北</option>
<option>河南</option>
</select>
<select id="region">
<option>西二旗</option>
<option>邯郸</option>
<option>新乡</option>
</select>
<input type="button" value="添加数据" onclick="add()"/><br /><br />
<input type="button" value="全选/反选" onclick="che()"/>
<input type="button" value="批量删除" onclick="dele()"/><br /><br />
<table border="1" cellspacing="0" class="table">
<tr>
<td width="70px"><input type="checkbox" onclick="check()" id="che"></td>
<td width="70px">姓名</td>
<td width="70px">性别</td>
<td width="70px">生日</td>
<td width="70px">住址</td>
<td width="70px">删除</td>
</tr>

</table>



</div>

</body>
</html>