花了我一天写出来的jq代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="jquery.js" type="text/javascript"></script>
       <style>
           .col{
               background-color: yellow;
           }
       </style>


   </head>

   <body>



       
       <form align="center">
           姓名：<input type="text" value="请输入姓名" name="name" id="name"/>
           年龄：<input type="text" name="age" id="age" value="请输入年龄" />
           性别：男<input type="radio" name="radio" value="男" id="sex1"/>
               女<input type="radio" name="radio" value="女" id="sex2"/>
           班级：<select id="clazz">
               <option value="java101">java101</option>
               <option value="java102">java102</option>
               <option value="java103">java103</option>
               <option value="java104">java104</option>
               </select>
           <input type="button" value="提交" id="save"/>
       </form>

       <table align="center" border="1px sold black" cellspacing="0px">
           <thead>
               <tr>
                   <td>
                       <input type="checkbox" id="cbx1" />
                   </td>
                   <td>姓名</td>
                   <td>年龄</td>
                   <td>性别</td>
                   <td>班级</td>
                   </tr>
           </thead>
           <tbody id="tbody"></tbody>
       </table>


       <script>

$("#save").on("click",function(){
               $("#cbx1").prop("checked",false)
               var arr=[];
               if ($("#sex1").prop("checked")) {
                   var sex1 = $("#sex1").val()
                   arr.push(sex1)
               }else {
               var sex2 = $("#sex2").val()
                  arr.push(sex2)
               }
               var tr =$("<tr></tr>")
               var td1 =$("<td>"+"<input type='checkbox' class='cbx2'/>"+"</td>")
               var td2 = $("<td>"+$("#name").val()+"</td>")
               var td3 = $("<td>"+$("#age").val()+"</td>")
               var td4 = $("<td>"+arr[0]+"</td>")
               var td5 = $("<td>"+$("#clazz").val()+"</td>")
               tr.append(td1).append(td2).append(td3).append(td4).append(td5)
               $("#tbody").append(tr)


               var cbx2 =$(".cbx2")
               $("#tbody").on("click",".cbx2",function(){
                   if($(this).prop("checked")==true){
                   $(this).parent().parent().addClass("col")

               }else{
                   $(this).parent().parent().removeClass("col")
                   $("#cbx1").checked=false
               }

               var number=0;
               for(var i=0;i<cbx2.length;i++){
                   if(cbx2[i].checked==true){
                       number++
                   }
               }
               if (number==cbx2.length) {
                   $("#cbx1").prop("checked",true)
               } else{
                   $("#cbx1").prop("checked",false)
               }



   })
               $("#cbx1").on("click",function(){
               if($("#cbx1").prop("checked")==true){
                   for(var i=0;i<cbx2.length;i++){
                       cbx2[i].checked=true
                   cbx2.parent().parent().addClass("col")
               }
               }else{
               for(var i=0;i<cbx2.length;i++){
                   cbx2[i].checked=false
                   cbx2.parent().parent().removeClass("col")
               }

               }
           })
   })
       </script>


   </body>
</html>

花了我一天写出来的jq代码

猜你喜欢