添加表格的方法

最新推荐文章于 2024-03-11 19:24:59 发布

眼角带笑_fxs

最新推荐文章于 2024-03-11 19:24:59 发布

阅读量194

点赞数

本文链接：https://blog.csdn.net/fxs_321/article/details/78513744

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>周六模拟</title>
  <script src="../JQuery/jquery-2.1.0.js" type="text/javascript"></script>
  <script>
   $(function(){
    //按钮点击事件
   $("#btn").click(function(){
    var flag1 = flag2 = flag3 = flag4 = false;

    //用户名非空
    var name = $("#name").val();
    if(name == null || name == ""){
     //alert("用户名不能为空");
     $("span").text("用户名不能为空");
     flag1 = false;
    }else{
     $("span").text();
     flag1 = true;
    }

    //密码长度验证
    var pwd = $("#pwd").val();
    var size = pwd.length;
    if(size < 4 || size >16){
     alert("密码长度不正确");
     flag2 = false;
    }else{
     flag2 = true;
    }

    //年龄必须是数字（先验证非空）
    var age = $("#age").val();
    if(isNaN(age)){
     alert("年龄必须是数字");
     flag3 = false;
    }else{
     flag3 = true;
    }

    //验证性别必选
    var sex = $("[name='sex']:checked");
    var sex2 = sex.val();
    var sexChecked = sex.size();
    if(sexChecked != 1){
     alert("性别必选");
     flag4 = false;
    }else{
     flag4 = true;
    }


    //提交成功追加数据
    var privince = $("#privince").val();
    var city = $("#city").val();

    if(flag1 && flag2 && flag3 && flag4){

     //创建单元格
     var tCheckbox = $("<th><input class='check' type='checkbox' /></th>");
     var tName = $("<td>"+name+"</td>");
     var tPwd = $("<td>"+pwd+"</td>");
     var tAge = $("<td>"+age+"</td>");
     var tSex = $("<td>"+sex2+"</td>");
     var tCity = $("<td>"+privince+"-"+city+"</td>");
     //创建tr
     var tr = $("<tr>");
     //向tr中追加td
     tr.append(tCheckbox).append(tName).append(tPwd).append(tAge).append(tSex).append(tCity);
     //把tr放到tbody中
     $("tbody:eq(1)").append(tr);
    }else{
     alert("asf");
    }



   });

   //二级联动
   $("#privince").change(function(){
    var privince = $(this).val();
    if(privince == "北京"){
     //选中北京怎么更改城市下拉菜单中的内容
     var city = $("<option selected='selected'>海淀区</option><option>昌平区</option><option>朝阳区</option><option>大兴区</option>");
     $("#city").html(city);

    }
    if(privince == "河北"){
     var city = $("<option >石家庄</option><option>唐山</option><option>保定</option><option selected='selected'>邢台</option>");
     $("#city").html(city);
    }
    if(privince == "山西"){
     var city = $("<option selected='selected'>运城</option><option>太原</option><option>临汾</option><option>大同</option>");
     $("#city").html(city);
    }
   });

   var a = 0;
   $("#first").click(function(){
    //var result = alert($(this).attr("checked"));
    //a = 1;
    if(a == 0){
     //alert();
     $(":checkbox").prop("checked","checked");
     a = 1;
    }else{
     //alert("asdf");
     $(":checkbox").prop("checked",false);
     a = 0;
    }
   });


   //删除选中的行的用户数据
             $("#btn_del").click(function(){
             var num = 0;
             $(".check").each(function(){
             if($(this).prop("checked")){//判断如果该行复选框被选中
             $(this).closest("tr").remove();//就移除该复选框所在的行
             num++;
             }
             });
             /*alert("选中了"+num+"个");*/
             });
  });

  </script>
</head>
<body>
  <center>
   <h3>用户注册</h3>
   <table border="1px solid red" cellpadding="10" cellspacing="0">
    <tr>
     <th>用户名</th>
     <td><input type="text" placeholder="用户名不能为空" id="name"/>
     <span id="nameid"></span></td>
    </tr>

    <tr>
     <th>密码</th>
     <td><input type="text" placeholder="长度在4-16位之间" id="pwd"/>
     <span id="pwdid"></span></td>
    </tr>

    <tr>
     <th>年龄</th>
     <td><input type="number" placeholder="年龄必须是数字" id="age"/>
     <span id="ageid"></span></td>
    </tr>

    <tr>
     <th>性别</th>
     <td><input type="radio" name="sex" value="男" id="sex1">男
   <input type="radio" name="sex" value="女" id="sex2">女
     <span id="sexSpan"></td>
    </tr>

    <tr>
     <th>住址</th>
     <td>省<select id="privince">
      <option>北京</option>
      <option>河北</option>
      <option>山西</option>

     </select>
     市<select id="city">
      <option>海淀区</option>
      <option>昭阳区</option>
     </select>
    </td>
    </tr>

    <tr>
     <td colspan="2"><button type="submit" id="btn" style=" margin-left: 100px;">提交</button></td>
    </tr>
   </table>

   <button id="btn_del">批量删除</button>

   <table id="tbody" border="1px solid red" cellpadding="10" cellspacing="0">
    <tr>
     <td><input id="first" type="checkbox" /></td>
     <th>用户名</th>
     <th>密码</th>
     <th>年龄</th>
     <th>性别</th>
     <th>住址</th>
    </tr>

   </table>

  </center>

</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript"></script>
        <script type="text/javascript">
        function selectALLNO() {
            // 获取要操作的复选框
            var box1=document.getElementById("boxId");
            //ecked判断是否选中
            if(box1.checked==true)
            {
                selectAll();
            }
            else
            {
                SelectNO();
            }
        }
        function selectAll() {
            // 获取要操作的复选框
            var box1=document.getElementsByName("love");
            //ecked判断是否选中
            for(var x=0;x<box1.length;x++)
            {
                var value1=box1[x];
                value1.checked=true;
            }
        }
        function SelectNO(){
            // 获取要操作的复选框
            var box2 = document.getElementsByName("love");
             //ecked判断是否选中
           for (var x = 0; x < box2.length; x++) {
               var value1=box2[x];
               value1.checked=false;
            }
        }
        function selectOther() {
            // 获取要操作的复选框
            var box1=document.getElementsByName("love");
            //ecked判断是否选中
            for(var x=0;x<box1.length;x++)
            {
                var value1=box1[x];
               if(value1.checked)
                   value1.checked=false;
               else
                   value1.checked=true;
            }
        }
    </script>

</head>
<body>
    <input type="checkbox" name="love"/>第一个
    <input type="checkbox" name="love"/>第二个
    <input type="checkbox" name="love"/>第三个
    <input type="checkbox" name="love"/>第四个
    <input type="checkbox" name="love"/>第五个
    <input type="checkbox" name="love"/>第六个<br/>

    <input type="button" value="全选" οnclick="selectAll();"/>
    <input type="button" value="全不选" οnclick="SelectNO();"/>
    <input type="button" value="反选" οnclick="selectOther();"/>

</body>
</html>