html+jquery

最新推荐文章于 2024-04-07 20:26:20 发布

XinHenz

最新推荐文章于 2024-04-07 20:26:20 发布

阅读量335

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/xinghen1234/article/details/78996863

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-3.2.1.min.js"></script>
        <style>
            table {
                border-collapse: collapse;
                margin-top: 20px;
            }

            table tr td {
                border: 1px solid black;
                height: 25px;
            }

            .tr01 {
                background: #999999;
            }

            .w60 {
                width: 80px;
            }

            .w100 {
                width: 120px;
            }

            table tr:nth-child(2n) {
                background: #eeeeee;
            }
        </style>
    </head>

    <body>
        <form>
            姓名：<input type="text" id="name" /> 性别：
            <select id="sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
            生日：<input type="date" id="tiem"> 住址：
            <select id="zz" onchange="change()">
                <option selected="selected">北京</option>
                <option>山西</option>
                <option>辽宁</option>
            </select>
            <select id="qu">
                <option selected="selected">海淀区</option>
                <option>太原</option>
                <option>海城市</option>
            </select>

            <input type="button" value="添加" style="background: #99ff00;" id="bt" />
        </form>

        <table>
            <tr class="tr01">
                <td class="w60"><input type="checkbox" class="checkAll>" </td>
                    <td class="w60">姓名</td>
                    <td class="w60">性别</td>
                    <td class="w100">生日</td>
                    <td class="w100">住址</td>
                    <td class="w60">删除</td>
            </tr>

        </table>
        <tbody>

        </tbody>
        <script type="text/javascript">
            $(function() {
                $("#bt").click(function() {
                    var name = $("#name").val();
                    var sex = $("#sex").val();
                    var tiem = $("#tiem").val();
                    var zz = $("#zz").val();
                    var qu = $("#qu").val();
                    var tr = $("<tr><td><input type='checkbox' name='checked'></td><td>" + name + "</td><td>" + sex + "</td><td>" + tiem + "</td><td>" + zz + "-" + qu + "</td><td><button>删除</button></td></tr>");
                    $("table").append(tr);
                    $("form")[0].reset();
                })

            });
            //删除
            $("tbody").on("click", "button", function() {
                var b = confirm("是否删除");
                if(b) {

                    $(this).parents("tr").remove();
                    n--;
                    console.log($("tbody input").length);
                }else{

                 return false;
                }

            });

            function change() {

                var x = document.getElementById("zz");
                var y = document.getElementById("qu");
                y.options.length = 0; // 清除second下拉框的所有内容  
                if(x.selectedIndex == 0) {
                    y.options.add(new Option("海淀区", "海淀区", false, true)); // 默认选中省会城市  
                    y.options.add(new Option("朝阳区", "朝阳区"));
                    y.options.add(new Option("东城区", "东城区"));
                    y.options.add(new Option("房山区", "房山区"));
                }
                if(x.selectedIndex == 1) {
                    y.options.add(new Option("太原市", "太原市", false, true)); // 默认选中省会城市  
                    y.options.add(new Option("吕梁市", "吕梁市"));
                    y.options.add(new Option("大同市", "大同市"));
                }
                if(x.selectedIndex == 2) {
                    y.options.add(new Option("大连市", "大连市"));
                    y.options.add(new Option("沈阳市", "沈阳市", false, true)); // 默认选中省会城市  
                    y.options.add(new Option("丹东市", "丹东市"));
                }
            }
        </script>
    </body>

</html>

XinHenz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+jquery

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.2.1.min.js"></script> <style> table { border
复制链接

扫一扫

专栏目录