表单 的 地址联动 添加~删除
2018-01-06 12:12
204 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0px;
margin: 0px;
/*box-sizing: border-box;*/
}
.box{
width: 800px;
height: 500px;
margin: 20px auto;
padding: 10px;
}
.box table:nth-child(1){
width: 780px;
margin-bottom: 5px;
}
.box table:nth-child(1) tr td{
height: 30px;
}
.box table:nth-child(1) tr td input{
width: 84px;
height: 25px;
}
.box table:nth-child(1) tr td select{
width: 84px;
height: 25px;
}
.box table:nth-child(1) tr td .btn{
background: #99ff00;
border-radius: 5px;
border: 1px solid #666666;
}
.box>input{
width: 70px;
height: 28px;
float: right;
border-radius: 5px;
border: 1px solid #666666;
margin-left: 30px;
margin-bottom: 5px;
}
.box>input:nth-child(3){
background: green;
}
.box>input:nth-child(2){
background: yellow;
}
.box .bg{
width: 780px;
margin-bottom: 5px;
}
注：隔行变色
.box .bg tr:nth-child(1){
background: gold;
}
.box .bg tr:nth-child(2n){
background: greenyellow;
}
</style>
<script type="text/javascript" src="../libs/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="box">
<table>
<tr>
<td>姓名:<input type="text" id="name" /></td>
<td>性别：<select id="sex"><option>男</option><option>女</option></select></td>
<td>生日：<input type="text" id="happyday" /></td>
<td>地址：
<select id="city">
<option value="0">北京</option>
<option value="1">山西</option>
</select>
<select id="addr1">
</select>
</td>
<td><input type="button" onclick="add()" value="添加" class="btn"></td>
</tr>
</table>
<hr />
<input type="button" onclick="delAll()" value="批量删除" />
<input type="button" onclick="che()" value="全选/反选" />
<table border="1" cellspacing="0" cellpadding="0" class="bg">
<tr>
<td><input type="checkbox" onclick="cheAll()" id="che"></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>操作</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
//实现城市的二级联动
$(function() {
var city = $("#city").val();
var addr2 = [
["北京", "西二旗"],
["临汾", "运城", "侯马", "平遥"]
];
for(var i = 0; i < addr2[city].length; i++) {
var op = $("<option></option>");
op.text(addr2[city][i]);
$("#addr1").append(op);
}
$("#city").change(function() {
city = $(this).val();
$("#addr1").empty();
for(var i = 0; i < addr2[city].length; i++) {
var op = $("<option></option>");
op.text(addr2[city][i]);
$("#addr1").append(op);
}
});
});
//添加的点击事件
function add() {
var b1 = false;
var b2 = false;
var name = $("#name").val(); //姓名
var happyday = $("#happyday").val(); //出生日期
var sex = $("#sex").val(); //性别
var sel = $("#addr1").val(); //地址 --》市区
var cs = $("#city option:selected").html();
//2. 完成用户添加功能。用户信息要求信息校验，用户名不小于3个字符且不大于30个字符，生日非空，住址实现两级联动，住址城市默认为北京，市区默认为西二旗，当用户改变城市时市区随之联动。
if(name == "") {
b1 = false;
} else if(name.length < 3 || name.length > 30) {
b1 = false;
} else {
b1 = true;
}
//判断出生日期非空
if(happyday == "") {
b2 = false;
} else {
b2 = true;
}
//判断变量为false时弹出信息错误，否则添加数据
if(b1 == false || b2 == false) {
alert("输入信息有误！");
} else {
$(".bg").append("<tr>" +
"<td><input type='checkbox' name='ck' ></td>" +
"<td>" + name + "</td>" +
"<td>
4000
" + sex + "</td>" +
"<td>" + happyday + "</td>" +
"<td>" + cs + "-" + sel + "</td>" +
"<td><input type='button' onclick='return del(this)' value='删除'></td>" +
"</tr>")
}
}
//删除时的弹窗提示
function del(p) {
var f = confirm("确认删除！！！");
if(!f) {
return;
}
p.parentNode.parentNode.remove();
}
//全选
function cheAll() {
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 delAll() {
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>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0px;
margin: 0px;
/*box-sizing: border-box;*/
}
.box{
width: 800px;
height: 500px;
margin: 20px auto;
padding: 10px;
}
.box table:nth-child(1){
width: 780px;
margin-bottom: 5px;
}
.box table:nth-child(1) tr td{
height: 30px;
}
.box table:nth-child(1) tr td input{
width: 84px;
height: 25px;
}
.box table:nth-child(1) tr td select{
width: 84px;
height: 25px;
}
.box table:nth-child(1) tr td .btn{
background: #99ff00;
border-radius: 5px;
border: 1px solid #666666;
}
.box>input{
width: 70px;
height: 28px;
float: right;
border-radius: 5px;
border: 1px solid #666666;
margin-left: 30px;
margin-bottom: 5px;
}
.box>input:nth-child(3){
background: green;
}
.box>input:nth-child(2){
background: yellow;
}
.box .bg{
width: 780px;
margin-bottom: 5px;
}
注：隔行变色
.box .bg tr:nth-child(1){
background: gold;
}
.box .bg tr:nth-child(2n){
background: greenyellow;
}
</style>
<script type="text/javascript" src="../libs/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="box">
<table>
<tr>
<td>姓名:<input type="text" id="name" /></td>
<td>性别：<select id="sex"><option>男</option><option>女</option></select></td>
<td>生日：<input type="text" id="happyday" /></td>
<td>地址：
<select id="city">
<option value="0">北京</option>
<option value="1">山西</option>
</select>
<select id="addr1">
</select>
</td>
<td><input type="button" onclick="add()" value="添加" class="btn"></td>
</tr>
</table>
<hr />
<input type="button" onclick="delAll()" value="批量删除" />
<input type="button" onclick="che()" value="全选/反选" />
<table border="1" cellspacing="0" cellpadding="0" class="bg">
<tr>
<td><input type="checkbox" onclick="cheAll()" id="che"></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>操作</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
//实现城市的二级联动
$(function() {
var city = $("#city").val();
var addr2 = [
["北京", "西二旗"],
["临汾", "运城", "侯马", "平遥"]
];
for(var i = 0; i < addr2[city].length; i++) {
var op = $("<option></option>");
op.text(addr2[city][i]);
$("#addr1").append(op);
}
$("#city").change(function() {
city = $(this).val();
$("#addr1").empty();
for(var i = 0; i < addr2[city].length; i++) {
var op = $("<option></option>");
op.text(addr2[city][i]);
$("#addr1").append(op);
}
});
});
//添加的点击事件
function add() {
var b1 = false;
var b2 = false;
var name = $("#name").val(); //姓名
var happyday = $("#happyday").val(); //出生日期
var sex = $("#sex").val(); //性别
var sel = $("#addr1").val(); //地址 --》市区
var cs = $("#city option:selected").html();
//2. 完成用户添加功能。用户信息要求信息校验，用户名不小于3个字符且不大于30个字符，生日非空，住址实现两级联动，住址城市默认为北京，市区默认为西二旗，当用户改变城市时市区随之联动。
if(name == "") {
b1 = false;
} else if(name.length < 3 || name.length > 30) {
b1 = false;
} else {
b1 = true;
}
//判断出生日期非空
if(happyday == "") {
b2 = false;
} else {
b2 = true;
}
//判断变量为false时弹出信息错误，否则添加数据
if(b1 == false || b2 == false) {
alert("输入信息有误！");
} else {
$(".bg").append("<tr>" +
"<td><input type='checkbox' name='ck' ></td>" +
"<td>" + name + "</td>" +
"<td>
4000
" + sex + "</td>" +
"<td>" + happyday + "</td>" +
"<td>" + cs + "-" + sel + "</td>" +
"<td><input type='button' onclick='return del(this)' value='删除'></td>" +
"</tr>")
}
}
//删除时的弹窗提示
function del(p) {
var f = confirm("确认删除！！！");
if(!f) {
return;
}
p.parentNode.parentNode.remove();
}
//全选
function cheAll() {
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 delAll() {
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>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 表单验证+二级联动+添加+全选/反选+删除
- 二级联动实现省市表单添加删除操作
- DOM的高级操作——表单的添加／删除／获取
- 动态添加删除Option达到二级联动
- Javascript 表单 Select 添加删除子项目
- HTML jquery 添加+删除+批量删除+二级联动
- Html/javascript动态添加/删除input控件到地址定位置
- Laravel小项目之第8节 Laravel-表单中查看详情及删除 8.1 给HTML添加链接
- jquery table表格添加删除数据（含批量删除，全选全不选和简单的表单验证）
- JQuery的表单的添加、删除
- 表单验证+添加+查询+排序+删除
- jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
- 动态的添加、删除表单
- 基于React实现表单数据的添加和删除详解
- Javascript 表单 Select 添加 删除 子项目 操作
- 动态添加删除表单
- 织梦自定义表单添加地区联动显示数字解决办法（支持三级）
- HTML 添加+二级联动+ 删除+批量删除
- 添加数据+二级联动+全选删除
- jQuery - 动态添加、删除form表单项（附：新增项数据无法提交问题解决）