前端_删除正行多选_添加

来源：互联网发布：集体智慧编程源代码编辑：程序博客网时间：2024/05/21 12:12

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>    <style>        * {            margin: 0;            padding: 0;        }        table {            border-collapse: collapse;            margin-top: 50px;        }        th, td {            width: 80px;            height: 40px;            line-height: 40px;            text-align: center;            border: 1px solid #000;        }    </style></head><body><input type="text" value="zs">姓名<input type="text" value="20">年龄<input type="text" value="女">性别<button type="button" class="tj">提交</button><br/><table>    <thead>    <tr>        <th><input type="checkbox" class="checkAll">全选</th>        <th>姓名</th>        <th>年龄</th>        <th>性别</th>        <th>操作</th>    </tr>    </thead>    <tbody>    <!--<tr>        <td><input type="checkbox"></td>        <td>zs</td>        <td>20</td>        <td>nan</td>        <td><button>删除</button></td>    </tr>-->    </tbody></table><script>    //计数器    var n = 0;    $(".tj").click(function () {        var name = $("input").eq(0).val();        var age = $("input").eq(1).val();        var sex = $("input").eq(2).val();        var add = "<tr><td><input type='checkbox'></td><td>" + name + "</td><td>" + age + "</td><td>" + sex + "</td><td><button>删除</button></td></tr>"        $("table").append(add);    });    /*$("tbody button").click(function(){     alert(0)     })*/    $("tbody").on("click", "button", function () {        $(this).parents("tr").remove();    });    //点击全选，下面的全部选择    $(".checkAll").click(function () {        //console.log($(this).prop("checked"));        if ($(this).prop("checked") == true) {            $("tbody input").prop("checked", true);        } else {            $("tbody input").prop("checked", false);        }    });    //下面的选择点击    $("tbody").on("click", "input", function () {        if ($(this).prop("checked") == true) {            n++;        } else {            n--;        }        if (n == $("tbody input").length) {            $(".checkAll").prop("checked", true);        } else {            $(".checkAll").prop("checked", false);        }    });</script></body></html>

效果图

阅读全文

0 0

前端_删除正行 多选_添加

前端_删除正行多选_添加