table

最新推荐文章于 2022-09-17 17:40:45 发布

Guiyide

最新推荐文章于 2022-09-17 17:40:45 发布

阅读量187

点赞数

本文链接：https://blog.csdn.net/Guiyide/article/details/78999186

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
       <style>

           table tr:nth-child(odd){
               background-color: #9999A6;
           }
           table tr:nth-child(even){
               background-color: #FAEBD7;
           }

       </style>
       <script>

           $(document).ready(function(){
               $("table").css("width","600px");

           });

           var play = true;
           var inbex = 0;
           var fchep;
           var tf = true;
           function getzengjia(){

               var name = $("#name1").val();
               var age1 = $("#age1").val();

               var xingbie = $("#section1 option:selected").val();
               var shen = $("#section2 option:selected").val();
               var qu = $("#section3 option:selected").val();


               if(name.length >30 || name.length<3){
                   $("#name2").html("用户名不小于3个字符且不大于30个字符");
                   play = false;
               }else{
                   $("#name2").html("");
                   play = true;
               }
               if (age1 == "" || age1 == null) {
                   $("#age2").html("生日非空");
                   play = false;
               }else{
                   $("#age2").html("");
                   play = true;
               }

               if(play){

                   var tab = $("#tab");
                   var trtd = "<tr><td><input type='checkbox' name='zche2' /></td>"
                   +"<td>"+name+"</td>"
                   +"<td>"+xingbie+"</td>"
                   +"<td>"+age1+"</td>"
                   +"<td>"+shen+"-"+qu+"</td>"
                   +"<td><input type='button' value='删除' id='yichu"+inbex+"' /></td>"
                   +"</tr>";
                   tab.append(trtd);
                   fchep = document.getElementsByName("zche2");


                   $("#yichu"+inbex+"").click(function(){
                       $(this).parent().parent().remove();
                   });


                   inbex++;
               }else{
                   alert("验证没过不能添加数据")
               }
           }

           function getquan(){

               var zche = $("#zche");
               if (tf) {
                   for (var i = 0; i < fchep.length; i++) {
                       fchep[i].checked = tf;
                   }
                   tf = false;
               }else{
                   for (var i = 0; i < fchep.length; i++) {
                       fchep[i].checked = !fchep[i].checked;
                   }
               }

           }

           function getpiliang(){



               for (var i = 0; i < fchep.length; i++) {
                       var ff = fchep[i].checked;
                       if (ff) {
                           alert(ff);
                           $(this).parent().parent().remove();
                       }
               }

           }



       </script>


   </head>
   <body>


       <form>
           姓名：<input type="text" style="width: 120px;" id="name1" /><span id="name2"></span>   <br />
           性别：<select id="section1">
               <option>
                   男
               </option>
               <option>
                   女
               </option>
           </select>   <br />

           生日：<input type="text" style="width: 120px;" id="age1" /><span id="age2"></span>   <br />

           住址：<select id="section2">
               <option>
                   北京
               </option>
               <option>
                   郑州
               </option>
               <option>
                   南京
               </option>
           </select>   
           <select id="section3">
               <option>
                   西二旗
               </option>
               <option>
                   二七区
               </option>
               <option>
                   离开区
               </option>
           </select>   <br />
           <input type="button" value="增加" οnclick="getzengjia()" /><br />
           <input type="button" value="全选/反选" οnclick="getquan()" /><br />
           <input type="button" value="批量删除" οnclick="getpiliang()" /><br />

       </form>

       <table border="1px" cellpadding="0px" cellspacing="0px" id="tab">
           <tr style="background-color: #7B7B7B;">
               <td><input type="checkbox" name="zche" id="zche" /></td>
               <td>姓名</td>
               <td>性别</td>
               <td>生日</td>
               <td>住址</td>
               <td>删除</td>
           </tr>

       </table>






   </body>
</html>

Guiyide

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table

table tr:nth-child(odd){ background-color: #9999A6; } table tr:nth-child(even){ background-color: #FAEBD7; }
复制链接

扫一扫