全选与反选 +二级联动

最新推荐文章于 2022-04-08 22:13:12 发布

Gemini_骑士

最新推荐文章于 2022-04-08 22:13:12 发布

阅读量309

点赞数

本文链接：https://blog.csdn.net/qq_39923392/article/details/78529540

版权

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>

        <style>
            tr {
                background: #d0d0d0;
            }
            /**/
            tr:nth-child(2n) {
                background: #ffffff;
            }

            tr {
                background-color: expression((this.sectionRowIndex % 2==0) ? "#FF3": "#6F9");
            }
        </style>
        <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(function() {
                $("#save").click(function() {
                    var tr = $("<tr>");
                    var td = $("<td> <input type='checkbox' name='ck' /></td>")
                    var td1 = $("<td></td>").html($("#username").val());
                    var td2 = $("<td></td>").html($("#sex").val());
                    var td3 = $("<td></td>").html($("#birthday").val());
                    var td4 = $("<td></td>").html($("#sheng option:checked").html() + "-" + $("#shi").val());
                    var td5 = $("<td> <button  onclick='del(this)'>删除</buton></td>")
                    tr.append(td).append(td1).append(td2).append(td3).append(td4).append(td5);
                    $("#t").append(tr);

//                  $("#t tr:odd").addClass("tr1");
//                  $("#t tr:even").addClass("tr2");

                });
            })
        </script>

        <script>
            //全选和反选效果
            function ckAll() {
                //获取所有复选框
                var cks = document.getElementsByName("ck");
                for(var i = 0; i < cks.length; i++) {
                    cks[i].checked = !cks[i].checked;
                }
            }

            function delAll() {
                //复选框
                var len = $("input[name='ck']:checked"); //选择所有name属性为ck的input  2>并且复选框为checked状态
                if(len.length == 0) {
                    alert("请选择");
                } else {
                    $(len).parent().parent().remove();
                }
            }

            function del(obj) {
                    $(obj).parent().parent().remove();
            }
        </script>
    </head>

    <body>
        <form action="#" id="f">
            用户名:<input type="text" id="username" />
            <span id="nametip">
            </span> 性别:
            <select id="sex">
                <option>男</option>
                <option>女</option>
            </select>
            <input type="text" id="birthday" /> 地址:
            <select id="sheng">
                <option value="0">北京</option>
                <option value="1">河北</option>
            </select>
            <select id="shi">
                <option id="xzshi">请选择</option>
                <option>海淀</option>
                <option>昌平</option>
                <option>朝阳</option>
            </select>
            <input type="button" id="save" value="注册" />
        </form>
        <input type="button" value="全选/反选" onclick="ckAll()" />
        <input type="button" value="批量删除" onclick="delAll()" />
        <table border="1px" cellspacing="0px" cellpadding="0px" style="padding-top: 10px;">

            <tr>
                <td><input type="checkbox" /></td>
                <td>用户名</td>
                <td>性别</td>
                <td>生日</td>
                <td>地址</td>
                <td>操作</td>
            </tr>
            <tbody id="t">

            </tbody>
        </table>
    </body>

</html>

Gemini_骑士

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全选与反选 +二级联动

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> tr { background: #d0d0d0; } /**/ t
复制链接

扫一扫