JQuery——DOM操作练习

最新推荐文章于 2022-03-28 13:13:53 发布

不知疲倦的专业码农

最新推荐文章于 2022-03-28 13:13:53 发布

阅读量264

点赞数 1

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44200101/article/details/116780237

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JQuery 练习

二级联动&&表格操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select>
    <option>--请选择--</option>
    <option value="0">福建</option>
    <option value="1">上海</option>
    <option value="2">广东</option>
</select>
<select>
    <option>--请选择--</option>
</select>
<hr>

<input type="text" placeholder="员工姓名">
<input type="text" placeholder="员工工资">
<input type="text" placeholder="员工部门">
<input type="button" value="添加">
<hr>
<table>
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>部门</th>
        <th>操作</th>
    </tr>
</table>
</body>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    var orr = [
        ["平潭","福州","泉州"],
        ["浦东","浦西","外滩"],
        ["广州","东莞","深圳"]
    ];
    $("select:first").change(function () {
        $("select:last").html($("<option>--请选择--</option>"));

        var va = $("select:first").val();
        var cits = orr[va];

        for(var i=0;i<orr.length;i++){
            var cityName = cits[i];
            var city = $("<option>"+cityName+"</option>");
            $("select:last").append(city);
        }
    });


    //设置点击按钮事件
    $("input[type='button']").click(function () {
        //获取三个输入框的值
        var name = $("input:eq(0)").val();
        var sal = $("input:eq(1)").val();
        var dept = $("input:eq(2)").val();
        var otr = $("<tr></tr>");
        var oname = $("<td></td>");
        var osal = $("<td></td>");
        var odept = $("<td></td>");
        var odel = $("<input type='button' value='删除'>");
        oname.text(name);
        osal.text(sal);
        odept.text(dept);
        otr.append(oname);
        otr.append(osal);
        otr.append(odept);
        otr.append(odel);
        $("table").append(otr);
        $("input:last[type='button']").click(function () {
            otr.remove();
        });
    });
</script>
</html>

不知疲倦的专业码农

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery——DOM操作练习

JQuery 练习二级联动&&表格操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><select> <option>--请选择--</option> <option v
复制链接

扫一扫