添加，删除，全选，批量，的数据

来源：互联网发布：考试宝典软件编辑：程序博客网时间：2024/05/22 17:22

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   body {
    width: 80%;
    margin: 0 auto;
   }

   table {
    width: 100%;
    border: 1px solid;
   }
  </style>
  <script src="js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
  <script>
   function del(e) {
    $(e).parent().parent().remove();
   }

   function save() {
    var tr = $("<tr></tr>"); //使用jquery创建元素tr
    tr.append("<td><input type='checkbox' name='ck' /> </td>"); //append,识别html标签
    //获取输入框的内容
    var ins = $("input[name='in']");
    /**
     * 获取所有输入框的内容
     */
    for(var i = 0; i < ins.length; i++) {
     var td = $("<td></td>");
     td.text(ins[i].value);
     //把创建td元素放入tr
     tr.append(td);
    }
    tr.append("<td><button onclick='del(this)'>删除</button></td>"); //append,识别html标签
    //向table中添加一行数据
    $("table").append(tr);
   }

   function ckAll() {
    var isxz = $("#ckall")[0].checked; //标识的作用
    //获取下面每个用户的选择框
    var cks = $("input[name='ck']");
    //调用jquery的遍历方法
    cks.each(function() {
     $(this).prop("checked", isxz);
    })
   }
  </script>
</head>

    </td>
   </tr>
   <tr>
    <td><input type="checkbox" id="ckall" onchange="ckAll()" /> 全选/全不选 </td>
    <td>用户名</td>
    <td>密码</td>
    <td>邮箱</td>
    <td><button>操作</button></td>
   </tr>
   <tr>
    <td><input type="checkbox" name="ck" /></td>
    <td>yyyy</td>
    <td>123</td>
    <td>123@163.com</td>
    <td>
     <button onclick="del(this)">删除</button>
    </td>
   </tr>
  </table>
</body>

</html>

阅读全文

0 0