<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../Day08/js/jquery-3.2.1.min.js"></script>
<script src="../Day08/js/angular.min.js"></script>
<script>
$(function(){
var city = $("#city").val();
var regions = [["西二旗"],["邯郸"],["郑州","濮阳"]];
for(var i=0; i<regions[city].length; i++){
var op = $("<option></option>");
op.text(regions[city][i]);
$("#region").append(op);
}
$("#city").change(function(){
city = $(this).val();
$("#region").empty();
for (var i=0; i<regions[city].length; i++) {
var op = $("<option></option>");
op.text(regions[city][i]);
$("#region").append(op);
}
});
});
function add(){
var f1 = false;
var f2 = false;
var name = $("#name").val();
if(name == ""){
f1=false;
alert("姓名不能为空");
}else if(name.length<3){
f1=false;
alert("姓名格式不正确");
}else{
f1=true;
}
var bir = $("#birthday").val();
if(bir == ""){
f2=false;
alert("生日不能为空");
}else{
f2=true;
}
var sex = $("#sex").val();
var sel = $("#region").val();
var cs = $("#city option:selected").html();
if(f1 == false || f2 == false){
alert("输入信息有误");
}else{
$(".tab").append("<tr>" +
"<td><input type='checkbox' name='ck' ></td>" +
"<td>" + name +"</td>" +
"<td>" + sex +"</td>" +
"<td>" + bir +"</td>" +
"<td>" + cs + "-" + sel +"</td>" +
"<td><input type='button' οnclick='return del(this)' value='删除'></td>" +
"</tr>");
}
}
function del(a){
var f = confirm("确认删除吗");
if (!f) {
return;
}
a.parentNode.parentNode.remove();
}
function checkAll(){
var cek = $("#che")[0].checked;
var ck = $("input[name = 'ck']");
for(var i=0; i<ck.length; i++){
ck[i].checked = cek;
}
}
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>
.box{
padding-top: 50px;
width: 1000px;
height: 300px;
border: solid 1px #FF0000;
margin: 0 auto;
text-align: center;
}
table{
width: 800px;
margin: 0 auto;
}
tr:nth-child(odd){
background: pink;
}
tr:nth-child(even){
background: peachpuff;
}
</style>
</head>
<body ng-app="Lj" ng-controller="con1">
<div class="box">
姓名:<input type="text" id="name"/>
性别:<select id="sex">
<option>男</option>
<option>女</option>
</select>
生日:<input type="date" id="birthday"/>
住址:<select id="city">
<option value="0">北京</option>
<option value="1">河北</option>
<option value="2">河南</option>
</select>
<select id="region">
</select>
<input type="button" value="添加数据" οnclick="add()"/><br /><br />
<input type="button" value="全选/反选" οnclick="che()"/>
<input type="button" value="批量删除" οnclick="dele()"/><br /><br />
<table border="1" cellpadding="0" cellspacing="0" class="tab">
<tr style="background: plum;">
<td><input type="checkbox" οnclick="checkAll()" id="che"/></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>删除</td>
</tr>
</table>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../Day08/js/jquery-3.2.1.min.js"></script>
<script src="../Day08/js/angular.min.js"></script>
<script>
$(function(){
var city = $("#city").val();
var regions = [["西二旗"],["邯郸"],["郑州","濮阳"]];
for(var i=0; i<regions[city].length; i++){
var op = $("<option></option>");
op.text(regions[city][i]);
$("#region").append(op);
}
$("#city").change(function(){
city = $(this).val();
$("#region").empty();
for (var i=0; i<regions[city].length; i++) {
var op = $("<option></option>");
op.text(regions[city][i]);
$("#region").append(op);
}
});
});
function add(){
var f1 = false;
var f2 = false;
var name = $("#name").val();
if(name == ""){
f1=false;
alert("姓名不能为空");
}else if(name.length<3){
f1=false;
alert("姓名格式不正确");
}else{
f1=true;
}
var bir = $("#birthday").val();
if(bir == ""){
f2=false;
alert("生日不能为空");
}else{
f2=true;
}
var sex = $("#sex").val();
var sel = $("#region").val();
var cs = $("#city option:selected").html();
if(f1 == false || f2 == false){
alert("输入信息有误");
}else{
$(".tab").append("<tr>" +
"<td><input type='checkbox' name='ck' ></td>" +
"<td>" + name +"</td>" +
"<td>" + sex +"</td>" +
"<td>" + bir +"</td>" +
"<td>" + cs + "-" + sel +"</td>" +
"<td><input type='button' οnclick='return del(this)' value='删除'></td>" +
"</tr>");
}
}
function del(a){
var f = confirm("确认删除吗");
if (!f) {
return;
}
a.parentNode.parentNode.remove();
}
function checkAll(){
var cek = $("#che")[0].checked;
var ck = $("input[name = 'ck']");
for(var i=0; i<ck.length; i++){
ck[i].checked = cek;
}
}
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>
.box{
padding-top: 50px;
width: 1000px;
height: 300px;
border: solid 1px #FF0000;
margin: 0 auto;
text-align: center;
}
table{
width: 800px;
margin: 0 auto;
}
tr:nth-child(odd){
background: pink;
}
tr:nth-child(even){
background: peachpuff;
}
</style>
</head>
<body ng-app="Lj" ng-controller="con1">
<div class="box">
姓名:<input type="text" id="name"/>
性别:<select id="sex">
<option>男</option>
<option>女</option>
</select>
生日:<input type="date" id="birthday"/>
住址:<select id="city">
<option value="0">北京</option>
<option value="1">河北</option>
<option value="2">河南</option>
</select>
<select id="region">
</select>
<input type="button" value="添加数据" οnclick="add()"/><br /><br />
<input type="button" value="全选/反选" οnclick="che()"/>
<input type="button" value="批量删除" οnclick="dele()"/><br /><br />
<table border="1" cellpadding="0" cellspacing="0" class="tab">
<tr style="background: plum;">
<td><input type="checkbox" οnclick="checkAll()" id="che"/></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>删除</td>
</tr>
</table>
</div>
</body>
</html>
3712
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
