jq的DOM操作增删改

最新推荐文章于 2024-05-16 04:04:41 发布

IT、木易

最新推荐文章于 2024-05-16 04:04:41 发布

阅读量2k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_37212162/article/details/78514456

版权

jQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

jq的DOM操作增删改

样式

body{
    width: 100%;
    height: 100%;
}
ul{
    padding-top:20px;
}
ul> li{
    width: 100px;
    height: 30px;
    background: #c4e3f3;
    float: left;
    list-style: none;
    text-align: center;
    margin-left: 10px;
    font-size:7px;
    line-height: 30px;

}
#list{
    clear: both;
    padding-top:10px;
    text-align: center;
}
input{
    margin-top: 10px;
}
button{
    margin-top: 20px;
    margin-left: 20px;
}
#box{
    margin-top:100px;
    width: 100%;
    height: 100%;
}
#box ul li{
    width: 100px;
    height: 30px;
    background: #c4e3f3;
    float: left;
    list-style: none;
    text-align: center;
    margin-left: 10px;
    font-size:7px;
    line-height: 30px;

}

结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul id="elect">
    <li id="app">前置</li>
    <li id="applast">追加</li>
    <li id="delF">删除第一个</li>
    <li id="delL">删除最后一个</li>
    <li id="update">替换</li>
</ul>
<br>
<ul id="list">
    <li><input type="checkbox"></li>
    <li>姓名</li>
    <li>性别</li>
    <li>年龄</li>
    <li>操作</li>
</ul>
<div id="box"></div>
<br>
姓名:<input type="text" id="names"><br>
性别:<input type="text" id="sex"><br>
年龄:<input type="text" id="age"><br>
<button id="btn" style="display: none">修改</button>
</body>
</html>

<script src="../js/jquery-3.2.1.js"></script>
<script>
    //前置
    $('#app').click(function () {
        $("#box").prepend(app())
    })
    //追加
    $('#applast').click(function () {
        $("#box").append(app())
    })
    //删除第一个
    $("#delF").click(function () {
        $("#box ul:first-child").remove()
    })
    //删除最后一个
    $("#delL").click(function () {
        $("#box ul:last-child").remove()
    })
    //替换
    $("#update").click(function () {
     if($("input:checkbox:checked").length){
         $("button").show()
     }

    })
    //修改
    $("#btn").click(function () {
        var list=$('<ul>')
        var oldlist=$("input:checkbox:checked").parents("ul")
        $.each($("input:text"),function (i,v) {
            var list_li=$('<li>');
            list_li.html($(v).val())
            list.append(list_li)
//            console.log(list_li)
        })
        list.prepend("<li><input type='checkbox'></li>")
        list.append("<li>替换</li>")
        list.replaceAll( oldlist)
    })
    //封装app
    function app() {
        var username=""
        var sex=""
        var age=""
        var html=""
        username+=$("#names").val()
        sex=$("#sex").val()
        age+=$("#age").val()
        html+="<ul>"+" <li><input type='checkbox'></li>"+"<li>"+username+"</li>"+"<li>"+sex+"</li>"+"<li>"+age+"</li>"+"<li>替换</li>"+"</ul>"
        return html
    }
</script>

IT、木易

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
jq的DOM操作增删改

jq的DOM操作增删改样式body{ width: 100%; height: 100%;}ul{ padding-top:20px;}ul> li{ width: 100px; height: 30px; background: #c4e3f3; float: left; list-style: none
复制链接

扫一扫