表单新增全选删除添加修改查询 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<table border="1px" id="table">
  <tr>
    <th>ID</th>
    <th>全选<input type="checkbox" id="quan" onclick="cheng(0)"></th>

    <th>姓名</th>
    <th>性别</th>
    <th>地址</th>
    <th>操作</th>

  </tr>
  <tr>
    <td class="userid">1</td>
    <td>选择<input type="checkbox" name="dan" onclick="cheng(1)"></td>

    <td>张三</td>
    <td>男</td>
    <td>广西</td>
    <td><a href="#" onclick="ZX(this)">修改</a></td>
  </tr>
  <tr>
    <td class="userid">2</td>
    <td>选择<input type="checkbox" name="dan" onclick="cheng(1)"></td>

    <td>张三</td>
    <td>男</td>
    <td>广西</td>
    <td><a href="#" onclick="ZX(this)">修改</a></td>
  </tr>
  <tr>
    <td class="userid">3</td>
    <td>选择<input type="checkbox" name="dan" onclick="cheng(1)"></td>

    <td>张三</td>
    <td>男</td>
    <td>广西</td>
    <td><a href="#" onclick="ZX(this)">修改</a></td>
  </tr>
</table>
<input type="text" id="wen"> <input type="button" value="查找" id="cha">
<div class="head">
  <!--  <input type="text" id="name" placeholder="请输入姓名">-->
  <!--  <select>-->
  <!--    <option>男</option>-->
  <!--    <option>女</option>-->
  <!--  </select>-->
  <!--  <input type="text" id="diz" placeholder="请输入地址">-->

  <input type="button" value="添加" onclick="ZX()">
  <input style="margin-left: 100px" type="button" id="shanchu" value="删除" onclick="cheng(2)">
</div>

<script>

  function cheng(obj) {
    var quan = document.getElementById("quan");
    var dan = document.getElementsByName("dan");

    if (obj==0){
      quans(quan,dan);
    }if (obj==1){
      dans(quan,dan);
    }if (obj==2){
      SC(quan,dan);

    }


    function quans(quan,dan) {
      for (var i = 0; i<dan.length;i++){
        //checked 状态
        dan[i].checked=quan.checked;
      }
    }
    function dans(quan,dan){
      var danyes = 0;
      var danno = 0;
      for (var i=0; i<dan.length; i++){
        if (dan[i].checked){
          danyes++;
        }else {
          danno++;
        }
      }
      if (danyes==dan.length){
        quan.checked=true
      }else if(danno == dan.length) {
        quan.checked=false;
      }else {
        quan.checked=false;
      }
    }
    function SC(quan,dan) {
      for(var i =dan.length-1 ;i >= 0 ;i--){

        if(dan[i].checked){
          // 10. 删除整行
          dan[i].parentNode.parentNode.remove();
          // //没有这个会剩一个问题
          // i--;
        }
      }
      //全选删除之后，会把全选按钮设置为非选
      quan.checked = false;
    }


  }
  function ZX(obj) {
    // var name = document.getElementById("name").value;
    // var sel = document.getElementsByTagName("select")[0];
    // var gender = sel.options[sel.selectedIndex].text;
    // var diz = document.getElementById("diz").value;

    var name = prompt("请输入名字");
    var gender = prompt("请输入性别");
    var diz = prompt("请输入地址");
    if (obj==null){
      insert(name,gender,diz);
    }else {
      xg(obj,name,gender,diz);
    }
    function insert(name,gender,diz) {
      if (name==null || gender==null || diz==null || name == "" || gender == "" || diz == ""){
        alert("新增失败字段有空")
        return;
      }
      var table = document.getElementById("table");
      table.innerHTML+="<tr>"+"<td>选择<input type=\"checkbox\" name=\"dan\" onclick=\"dans()\"></td>"+"<td>3</td>"+"<td>"+name+"</td>"+"<td>"+gender+"</td>"+"<td>"+diz+"</td>"+"<td><a href=\"#\" onclick=\"ZX(this)\">修改</a></td>"+"</tr>";
      alert("新增成功")
    }
    function xg(obj,name,gender,diz) {
      if (name==null || gender==null || diz==null ||name == "" || gender == "" || diz == ""){
        alert("修改失败字段有空")
        return;
      }
      obj.parentNode.parentNode.innerHTML = "<tr>"+"<td>选择<input type=\"checkbox\" name=\"dan\" onclick=\"cheng(1)\"></td>"+"<td>3</td>"+"<td>"+name+"</td>"+"<td>"+gender+"</td>"+"<td>"+diz+"</td>"+"<td><a href=\"#\" onclick=\"ZX(this)\">修改</a></td>"+"</tr>";
      alert("修改成功")
    }
  }
  // $("#cha").click(function () {
  //   var wen = $("#wen").val();
  //
  // })
  $("#cha").click(function () {
    var key = $("#wen").val()
    var trr = $("table tr:gt(0)")
    if (key != "") {
      for (var i = 0; i < trr.length; i++) {
        var id = trr.eq(i).find("td:first").html()
        if (id == key) {
          trr.eq(i).show()
        } else {
          trr.eq(i).hide()
        }
      }
    } else {
      for (var i = 0; i < trr.length; i++) {
        trr.eq(i).show()
      }
    }
  })
</script>
</body>
</html>

 

posted @ 2022-11-13 16:20  小白学程  阅读(40)  评论(0)    收藏  举报