hai
来源：互联网 发布：nginx 修改默认路径 编辑：程序博客网 时间：2024/06/03 19:11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
姓名：<input type="text" id="name" value=""/>
性别：<select id="xing">
<option>男</option>
<option>女</option>
</select>
生日：<input type="text" id="sheng" value=""/>
住址：<select id="province">
<option>----请选择省份----</option>
<option>北京</option>
<option>上海</option>
<option>江苏</option>
</select>
<select class="city">
<option>----请选择城市----</option>
</select>
<select class="city">
<option>东城</option>
<option>西城</option>
<option>崇文</option>
<option>宣武</option>
<option>朝阳</option>
</select>
<select class="city">
<option>黄浦</option>
<option>卢湾</option>
<option>徐汇</option>
<option>长宁</option>
<option>静安</option>
</select>
<select class="city">
<option>南京</option>
<option>镇江</option>
<option>苏州</option>
<option>南通</option>
<option>扬州</option>
</select>
<input type="button" name="" id="add" value="添加" />
<input type="button" id="zhong" value="全选/反选" />
<input type="button" id="deleAll" value="批量删除" /><br /><br /><br />
<table cellpadding="0" cellspacing="0" border="1" width="800px" id="t">
<tr align="center" style="background: gray;">
<td><input type="checkbox" id=""/></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>操作</td>
</tr>
</table>
<script type="text/javascript">
$("#add").click(function(){
var name = $("#name").val();
var xing = $("#xing").val();
var sheng = $("#sheng").val();
var province = $("#province").val();
$("#t").append("<tr align='center'><td><input type='checkbox' name='cb'/></td><td>"+name+"</td><td>"+xing+"</td><td>"+sheng+"</td><td>"+province+"</td><td><input type = 'button' value = '删除' onclick='dele(this)'/></td></tr>")
});
function dele(t){
if(confirm("您是否确定要删除商品？")){
t.parentNode.parentNode.remove();
}
}
$("#deleAll").click(function(){
if(confirm("您是否确定要删除商品？")){
var cbs = $("input[type=checkbox]:checked");
for (var i =0;i<cbs.length;i++) {
var cb = cbs[i];
cb.parentNode.parentNode.remove();
}
}
})
var flag = true;
$("#zhong").click(function(){
var cb = $("input[type=checkbox]");
for (var i =0;i<cb.length;i++) {
cb[i].checked = flag;
}
flag=!flag;
})
$(document).ready(function(){
$("#province").change(function(){
$("#province option").each(function(i,o){
if($(this).attr("selected"))
{
$(".city").hide();
$(".city").eq(i).show();
}
});
});
$("#province").change();
});
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
姓名：<input type="text" id="name" value=""/>
性别：<select id="xing">
<option>男</option>
<option>女</option>
</select>
生日：<input type="text" id="sheng" value=""/>
住址：<select id="province">
<option>----请选择省份----</option>
<option>北京</option>
<option>上海</option>
<option>江苏</option>
</select>
<select class="city">
<option>----请选择城市----</option>
</select>
<select class="city">
<option>东城</option>
<option>西城</option>
<option>崇文</option>
<option>宣武</option>
<option>朝阳</option>
</select>
<select class="city">
<option>黄浦</option>
<option>卢湾</option>
<option>徐汇</option>
<option>长宁</option>
<option>静安</option>
</select>
<select class="city">
<option>南京</option>
<option>镇江</option>
<option>苏州</option>
<option>南通</option>
<option>扬州</option>
</select>
<input type="button" name="" id="add" value="添加" />
<input type="button" id="zhong" value="全选/反选" />
<input type="button" id="deleAll" value="批量删除" /><br /><br /><br />
<table cellpadding="0" cellspacing="0" border="1" width="800px" id="t">
<tr align="center" style="background: gray;">
<td><input type="checkbox" id=""/></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>操作</td>
</tr>
</table>
<script type="text/javascript">
$("#add").click(function(){
var name = $("#name").val();
var xing = $("#xing").val();
var sheng = $("#sheng").val();
var province = $("#province").val();
$("#t").append("<tr align='center'><td><input type='checkbox' name='cb'/></td><td>"+name+"</td><td>"+xing+"</td><td>"+sheng+"</td><td>"+province+"</td><td><input type = 'button' value = '删除' onclick='dele(this)'/></td></tr>")
});
function dele(t){
if(confirm("您是否确定要删除商品？")){
t.parentNode.parentNode.remove();
}
}
$("#deleAll").click(function(){
if(confirm("您是否确定要删除商品？")){
var cbs = $("input[type=checkbox]:checked");
for (var i =0;i<cbs.length;i++) {
var cb = cbs[i];
cb.parentNode.parentNode.remove();
}
}
})
var flag = true;
$("#zhong").click(function(){
var cb = $("input[type=checkbox]");
for (var i =0;i<cb.length;i++) {
cb[i].checked = flag;
}
flag=!flag;
})
$(document).ready(function(){
$("#province").change(function(){
$("#province option").each(function(i,o){
if($(this).attr("selected"))
{
$(".city").hide();
$(".city").eq(i).show();
}
});
});
$("#province").change();
});
</script>
</body>
</html>
阅读全文
0 0
- hai
- hai
- hai
- hai
- hai
- hai de nver 155nver55522797
- gtk多线程控制暂停和继续.(HAI)
- java.net.UnknownHostException: you.hai.com
- UVa 1220 Party at Hai-Bula（树形DP）
- CTO WANTED（Shang Hai) 发个招聘信息
- ETH
- ionic3环境搭建
- made
- Qt5学习-基本概念
- IO对异常的操作
- hai
- 【NOIP2017】【Luogu P3956】【SPFA】棋盘
- File类的方法
- 习题8-1 装箱（Bin Packing, SWERC 2005, UVa1149）
- 数学菜鸟和大佬的关注点有什么不同？
- RN6752芯片简介
- 这位刚获奖的中国80后数学家，网友曾说：强到无法理解
- [知了堂学习笔记] Ajax入门
- sql 注入
