JQuery全选,反选,批量删除
来源:互联网 发布:wow.js是用来做什么的 编辑:程序博客网 时间:2024/04/30 12:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>周考二</title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#quanxuan{
background-color: yellow;
margin-left: 60px;
margin-top: 10px;
margin-bottom: 10px;
}
#shanchu{
background-color: red;
margin-top: 10px;
margin-bottom: 10px;
}
/*
隔行变色*/
tr:nth-child(odd) {background-color: royalblue;}
tr:nth-child(even) {background-color: gold;}
tr:nth-child(1) {background-color: teal;}
</style>
</head>
<body>
<form action="#" id="f">
姓名:<input type="text" id="name" />
性别:<select id="sex">
<option>男</option>
<option>女</option>
</select>
生日:<input type="text" id="birthday" />
住址:<select id="sheng">
<option>北京</option>
</select>
<select id="shi">
<option>西二旗</option>
</select>
<input type="submit" value="添加" /><br />
</form>
<input type="button" id="quanxuan" value="全选" onclick="quanxuan()"/><input type="button" id="fanxuan" value="反选" /><input type="button" id="shanchu" value="批量删除" />
<br />
<table border="1px" cellspacing="0px" cellpadding="0px" id="t">
<tr>
<td><input type="checkbox" checked="checked"/></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址址</td>
<td>删除</td>
</tr>
</table>
<!--
1.实现布局效果
2.获取名字,验证是否不小于3个字符且不大于30个字符
3.生日非空
4.住址实现两级联动,住址城市默认为北京,市区默认为西二旗
5.把输入的内容添加到页面
6.删除的方法
-->
<script type="text/javascript">
//页面加载的时候,就要将省的信息,和市的信息添加到页面
var arr = new Array();
arr["山西"]=new Array("运城","太原");
arr["山东"]=new Array("济南","青岛","单县");
//先将省放入第一个下拉菜单
for(sheng in arr){
$("#sheng").append("<option>"+sheng+"</option>");
}
//-----------------------------------市----
//当省的下拉改变的时候,市做相应的显示
$("#sheng").change(function(){
//每次清空一下,防止重复
$("#shi").empty();
$("#shi").append("<option></option>");
//根据省取出市,放入第二个下拉菜单
var s1 = $("#sheng").val();
var shis = arr[s1];//shis是个数组
for(shi in shis){
var s2 = shis[shi];
$("#shi").append("<option>"+s2+"</option>");
}
});
//表单验证
$("#f").submit(function(){
//获取名字,验证是否不小于3个字符且不大于30个字符
var username = $("#name").val();
if (username.length<3||username.length>30) {
alert("姓名必须大于3个字符且不大于30个字符")
return;//结束方法
}
//生日非空
var birthday = $("#birthday").val();
if (birthday == "") {
alert("生日不能为空")
return;//结束方法
}
//获取地址
var address = $("#sheng").val()+"-"+$("#shi").val();
//获取性别
var sex = $("#sex").val();
//添加到页面
var tr = "<tr><td><input type='checkbox' class='checkbox'/></td><td>"+username+"</td><td>"+sex+"</td><td>"+birthday+"</td><td>"+address+"</td><td><input type = 'button' value = '删除' onclick = 'dele(this)'/></td></tr>"
$("#t").append(tr);
});
//删除的方法
function dele(a){
//弹出框提示
alert("确定删除吗?");
a.parentNode.parentNode.remove();
}
//全选
function quanxuan(){
var cbs = document.getElementsByClassName("checkbox");
// for(var i = 0;i<cbs.length;i++){
// var cb = cbs[i];
// cb.checked = true;
// }
var cbs = $(".checkbox");
for(var i = 0;i<cbs.length;i++){
var cb = cbs[i];
cb.checked = true;
}
}
//反选
// var cbs = document.getElementsByClassName("checkbox");
// for(var i = 0;i<cbs.length;i++){
// var cb = cbs[i];
// cb.checked = !cb.checked;
// }
$("#fanxuan").click(function(){
var cbs = $(".checkbox");
for(var i = 0;i<cbs.length;i++){
var cb = cbs[i];
cb.checked = !cb.checked;
}
});
//批量删除
$("#shanchu").click(function(){
var flag = false;
var arr = new Array();
//判断是否选中
var cbs = $(".checkbox");
for(var i = 0;i<cbs.length;i++){
var cb = cbs[i];
if(cb.checked == true){
flag=true;
arr.push(cb);
}
}
if(flag==false){
alert("至少选择一个");
}else{
var b = confirm("确定删除吗?");
if(b){
//遍历删除
for(var j = 0;j<arr.length;j++){
var nn = arr[j];
nn.parentNode.parentNode.remove();
}
}
}
})
// //批量删除
// $("#shanchu").click(function(){
// var flag = false;
// var arr = new Array();
// //判断是否有选中的
// var cbs = document.getElementsByName("cb");
// var cbs = $("input[type=checkbox]");
// //如果没有,提示
// for (var i = 1;i<cbs.length;i++) {
// var cb = cbs[i];
// if (cb.checked==true) {
// flag=true;
// arr.push(cb);
// }
// }
// //如果有的话,提示删除
// if (flag==false) {
// alert("请至少选中一个");
// } else{
// //确认删除,删除
// var b = confirm("确定是否删除");
// if(b==true){
// //再次遍历,删除
// for(var j = 0;j<arr.length;j++){
// var cb = arr[j];
// cb.parentNode.parentNode.remove();
// }
// }
// }
//
// });
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>周考二</title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#quanxuan{
background-color: yellow;
margin-left: 60px;
margin-top: 10px;
margin-bottom: 10px;
}
#shanchu{
background-color: red;
margin-top: 10px;
margin-bottom: 10px;
}
/*
隔行变色*/
tr:nth-child(odd) {background-color: royalblue;}
tr:nth-child(even) {background-color: gold;}
tr:nth-child(1) {background-color: teal;}
</style>
</head>
<body>
<form action="#" id="f">
姓名:<input type="text" id="name" />
性别:<select id="sex">
<option>男</option>
<option>女</option>
</select>
生日:<input type="text" id="birthday" />
住址:<select id="sheng">
<option>北京</option>
</select>
<select id="shi">
<option>西二旗</option>
</select>
<input type="submit" value="添加" /><br />
</form>
<input type="button" id="quanxuan" value="全选" onclick="quanxuan()"/><input type="button" id="fanxuan" value="反选" /><input type="button" id="shanchu" value="批量删除" />
<br />
<table border="1px" cellspacing="0px" cellpadding="0px" id="t">
<tr>
<td><input type="checkbox" checked="checked"/></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址址</td>
<td>删除</td>
</tr>
</table>
<!--
1.实现布局效果
2.获取名字,验证是否不小于3个字符且不大于30个字符
3.生日非空
4.住址实现两级联动,住址城市默认为北京,市区默认为西二旗
5.把输入的内容添加到页面
6.删除的方法
-->
<script type="text/javascript">
//页面加载的时候,就要将省的信息,和市的信息添加到页面
var arr = new Array();
arr["山西"]=new Array("运城","太原");
arr["山东"]=new Array("济南","青岛","单县");
//先将省放入第一个下拉菜单
for(sheng in arr){
$("#sheng").append("<option>"+sheng+"</option>");
}
//-----------------------------------市----
//当省的下拉改变的时候,市做相应的显示
$("#sheng").change(function(){
//每次清空一下,防止重复
$("#shi").empty();
$("#shi").append("<option></option>");
//根据省取出市,放入第二个下拉菜单
var s1 = $("#sheng").val();
var shis = arr[s1];//shis是个数组
for(shi in shis){
var s2 = shis[shi];
$("#shi").append("<option>"+s2+"</option>");
}
});
//表单验证
$("#f").submit(function(){
//获取名字,验证是否不小于3个字符且不大于30个字符
var username = $("#name").val();
if (username.length<3||username.length>30) {
alert("姓名必须大于3个字符且不大于30个字符")
return;//结束方法
}
//生日非空
var birthday = $("#birthday").val();
if (birthday == "") {
alert("生日不能为空")
return;//结束方法
}
//获取地址
var address = $("#sheng").val()+"-"+$("#shi").val();
//获取性别
var sex = $("#sex").val();
//添加到页面
var tr = "<tr><td><input type='checkbox' class='checkbox'/></td><td>"+username+"</td><td>"+sex+"</td><td>"+birthday+"</td><td>"+address+"</td><td><input type = 'button' value = '删除' onclick = 'dele(this)'/></td></tr>"
$("#t").append(tr);
});
//删除的方法
function dele(a){
//弹出框提示
alert("确定删除吗?");
a.parentNode.parentNode.remove();
}
//全选
function quanxuan(){
var cbs = document.getElementsByClassName("checkbox");
// for(var i = 0;i<cbs.length;i++){
// var cb = cbs[i];
// cb.checked = true;
// }
var cbs = $(".checkbox");
for(var i = 0;i<cbs.length;i++){
var cb = cbs[i];
cb.checked = true;
}
}
//反选
// var cbs = document.getElementsByClassName("checkbox");
// for(var i = 0;i<cbs.length;i++){
// var cb = cbs[i];
// cb.checked = !cb.checked;
// }
$("#fanxuan").click(function(){
var cbs = $(".checkbox");
for(var i = 0;i<cbs.length;i++){
var cb = cbs[i];
cb.checked = !cb.checked;
}
});
//批量删除
$("#shanchu").click(function(){
var flag = false;
var arr = new Array();
//判断是否选中
var cbs = $(".checkbox");
for(var i = 0;i<cbs.length;i++){
var cb = cbs[i];
if(cb.checked == true){
flag=true;
arr.push(cb);
}
}
if(flag==false){
alert("至少选择一个");
}else{
var b = confirm("确定删除吗?");
if(b){
//遍历删除
for(var j = 0;j<arr.length;j++){
var nn = arr[j];
nn.parentNode.parentNode.remove();
}
}
}
})
// //批量删除
// $("#shanchu").click(function(){
// var flag = false;
// var arr = new Array();
// //判断是否有选中的
// var cbs = document.getElementsByName("cb");
// var cbs = $("input[type=checkbox]");
// //如果没有,提示
// for (var i = 1;i<cbs.length;i++) {
// var cb = cbs[i];
// if (cb.checked==true) {
// flag=true;
// arr.push(cb);
// }
// }
// //如果有的话,提示删除
// if (flag==false) {
// alert("请至少选中一个");
// } else{
// //确认删除,删除
// var b = confirm("确定是否删除");
// if(b==true){
// //再次遍历,删除
// for(var j = 0;j<arr.length;j++){
// var cb = arr[j];
// cb.parentNode.parentNode.remove();
// }
// }
// }
//
// });
</script>
</body>
</html>
阅读全文
0 0
- JQuery全选,反选,批量删除
- jquery全选/反选/批量删除
- jQuery添加删除,全选反选,批量删除
- 全选,反选,批量删除
- 全选、反选、批量删除
- 批量删除 全选 反选
- YII2 jquery全选 反选 全不选 批量删除 分页
- YII2 jquery全选 反选 全不选 批量删除 分页
- 批量删除+单个删除+全选反选
- yii框架全选反选批量删除
- 全选,反选,批量删除,全不选,即点即改
- jq全选反选批量删除
- 全选和反选及批量删除
- 全选反选和批量删除
- angular全选反选批量删除
- Javascript Jquery 复选框的全选、单选与反选、批量删除
- jquery实现限输入整数,全选反选,批量删除,设置排序
- Angularjs 全选、反选、勾选删除、批量删除
- [原型设计]Axure制作首页轮播图片切换效果
- NOIP2017 大翻车记
- 平衡二叉树理解
- Okhttp解析(四)网络连接的建立
- [原型设计]Axure制作鼠标悬停图片切换效果
- JQuery全选,反选,批量删除
- Python零基础学习(3)
- c语言作业题11.11/12
- iOS11自定义弹窗不显示/HUD不消失的问题
- JS数组
- Qt--core模块概述
- Combinatorics——HDUOJ 1492
- 软件工程(C编码实践篇)课程总结
- 踟躇之后的明朗