全选与反选
来源：互联网 发布：萨姆鲍维实力.知乎 编辑：程序博客网 时间：2024/05/16 12:02
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #sub{ background: chartreuse; width: 80px; height: 30px; border-radius: 15%; } #quan_fan{ background: yellow; width: 80px; height: 30px; border-radius: 15%; } #p_shan{ background: red; width: 80px; height: 30px; border-radius: 15%; } table{ width: 600px; height: 100px; border-collapse: collapse; } th{ padding: 8px; border: 1px solid #000000; } </style> <script src="../jquery-1.11.1/jquery-2.1.0.js"></script> <script type="text/javascript"> $(function(){ var qu_bj = ["西二旗", "西三旗", "回龙观"]; var qu_sy = ["沈北新区", "和平区", "皇姑区"]; for(var i = 0; i < qu_bj.length; i++){ var $opt = $("<option></option>"); $opt.html(qu_bj[i]); $opt.attr("value", qu_bj[i]); if(qu_bj[i] == "西二旗"){ $opt.attr("selected", "selected"); } $("#qu").append($opt); } $("#city").change(function(){ var city = $("#city").val(); if(city == "北京"){ add_opt(qu_bj); }else if(city == "沈阳"){ add_opt(qu_sy); } }) function add_opt(arr){ $("#qu").children().remove(); for(var i = 0; i < arr.length; i++){ var $opt = $("<option></option>"); $opt.html(arr[i]); $opt.attr("value", arr[i]); $("#qu").append($opt); } } function ghbs(){ $("#mytbody tr:even").css("background-color", "brown"); $("#mytbody tr:odd").css("background-color", "burlywood"); } $("#sub").click(function(){ var name = $("#name").val(); var reg1 = /^[\x00-\xff]{3,30}$/; var flag1 = false; if(reg1.test(name)){ alert("姓名必须为3-30个汉字"); flag1 = false; }else{ flag1 = true; } var sex = $("#sex").val(); //alert(sex); var birth = $("#birth").val(); var flag2 = false; if(birth.trim() == "" || birth == null){ alert("生日不能为空"); flag2 = false; }else{ flag2 = true; } var city = $("#city").val(); var qu = $("#qu").val(); if(flag1 && flag2){ $("#mytable").attr("style", "display=block"); var $mytr = $("<tr></tr>"); var $mytd1 = $("<td></td>"); var $mycb = $("<input type='checkbox' />"); $mytd1.html($mycb); var $mytd2 = $("<td></td>"); $mytd2.html(name); var $mytd3 = $("<td></td>"); $mytd3.html(sex); var $mytd4 = $("<td></td>"); $mytd4.html(birth); var $mytd5 = $("<td></td>"); $mytd5.html(city+"-"+qu); var $mytd6 = $("<td></td>"); var $mybtn = $("<button>删除</button>"); $mybtn.click(function(){ var isDel = confirm("是否确定删除？"); if(isDel){ $mybtn.parent().parent().remove(); ghbs(); if($("#mytbody").children() == 0){ $("#mytable").attr("style", "display=none"); } } }) $mytd6.html($mybtn); $mytr.append($mytd1); $mytr.append($mytd2); $mytr.append($mytd3); $mytr.append($mytd4); $mytr.append($mytd5); $mytr.append($mytd6); $("#mytbody").append($mytr); ghbs(); } }) $("#quan_fan").click(function(){ if($("input[type='checkbox']:checked").length == 0){ $("input[type='checkbox']").each(function(){ $(this).prop("checked", true); }) }else{ $("input[type='checkbox']").each(function(){ if($(this).is(":checked")){ $(this).prop("checked", false); }else{ $(this).prop("checked", true); } }) } }) $("#p_shan").click(function(){ if($("input[type='checkbox']:checked").length == 0){ alert("需要先选中数据！"); }else{ var isDel = confirm("是否确定删除？"); if(isDel){ $("input[type='checkbox']:checked").parent().parent().remove(); } } }) }) </script></head><body>姓名:<input id="name" type="text"/> 性别:<select id="sex" style="height: 20px;"> <option value="男">男</option> <option value="女">女</option></select> 生日:<input id="birth" type="text" /> 住址:<select id="city"> <option value="北京" selected="selected">北京</option> <option value="沈阳">沈阳</option></select><select id="qu"></select> <input type="button" id="sub" value="提交" /><br /><button id="quan_fan" style="margin-left: 650px;margin-top: 10px;">全选/反选</button><button id="p_shan" style="margin-left: 20px;margin-top: 10px;">批量删除</button><table id="mytable" style="margin-top: 30px;display: none;" border="1px" cellspacing="0"> <thead> <tr> <th>选择</th> <th>姓名</th> <th>性别</th> <th>生日</th> <th>住址</th> <th>删除</th> </tr> </thead> <tbody id="mytbody"></tbody></table></body></html>第二个<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Title</title> <style type="text/css"> table{ width: 600px; text-align: center; border-collapse: collapse; } td{ padding: 10px; border: 1px solid #000000; } </style> <script src="../angular-1.5.5/angular.min.js"></script> <script> var aa=angular.module("zwb",[]); aa.controller("d1",["$scope",function($scope){ $scope.zj=0; //创建数组 $scope.mlist=[{ name:'鼠标',sl:1,dj:101 },{ name:'键盘',sl:3,dj:601 },{ name:'图集',sl:1,dj:3001 }]; $scope.btn=function(i){ $scope.mlist.splice(i,1); console.log($scope.mlist); if($scope.mlist.length==0){ alert("购物车为空"); } $scope.zj=0; for(var i=0;i<$scope.mlist.length;i++){ $scope.zj=$scope.zj+($scope.mlist[i].sl*$scope.mlist[i].dj); } }; for(var i=0;i<$scope.mlist.length;i++){ $scope.zj=$scope.zj+($scope.mlist[i].sl*$scope.mlist[i].dj); } }]) </script></head><body ng-app="zwb" ng-controller="d1"><table> <tr> <td>商品：</td> <td>数量：</td> <td>单价：</td> <td>小计：</td> <td>操作</td> </tr> <tr ng-repeat="li in mlist"> <td>{{li.name}}</td> <td>{{li.sl}}</td> <td>RMB{{li.dj|currency:"￥"}}</td> <td>RMB{{li.sl*li.dj|currency:"￥"}}</td> <td> <input type="button" value="删除" ng-click="btn($index)"/> </td> </tr> <tr> <td colspan="5"> 总价：RMB{{zj|currency:'￥'}} </td> </tr></table></body></html>
阅读全文
0 0
- 全选与反选
- 全选与反选
- 全选与反选
- 实现全选与反选
- js全选与反选
- CListCtrl全选与反选
- checkbox 全选 与 反选
- javaScript 全选与反选
- 全选与反选 (转)
- checkbox全选与反选
- checkbox全选与反选
- Jquery全选与反选
- CListCtrl全选与反选
- checkbox全选与反选
- checkbox全选与反选
- 全选与反选代码
- Checkbox全选与反选
- javascript 全选与反选
- 【第六届蓝桥杯】串逐位和
- 微信小程序常见问题
- 微信自定义菜单开发案例
- leetcode: 38. Count and Say
- div不可编辑的问题
- 全选与反选
- 7-19 PAT Judge（25 分）(结构体排序)
- 【深度相机系列三】深度相机原理揭秘--双目立体视觉
- 《大话设计模式》java实现之原型模式
- CentOS版Linux获取IP
- 活在当下
- dubbo入门示例
- springmvc 时间格式化
- 7-20 电话聊天狂人（25 分） （哈希）
