juqery添加删除节点

时间：2021-05-22 23:46:14 阅读：22 评论：0 收藏：0 [点我收藏+]

进行书写前要先导入jquery文件

1.html页面，这里我是把jQuery写到html页面中的；

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>商品</title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/demo.js"></script>
        <script src="js/jquery-3.5.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn").click(function(){
                    $("table").append(
                        "<tr>"+
                            "<td class=\"checkbox\">"+
                            "<input class=\"check-one check\" type=\"checkbox\" />"+
                            "</td>"+
                            "<td class=\"goods\">"+
                                "<img src=\"images/huozhe.jpg\"/>"+
                                "<span>书名：《活着》</span>"+
                                "<span>作者：余华</span>"+
                            "</td>"+
                            "<td class=\"price\">25.32</td>"+
                            "<td class=\"count\">"+
                                "<span class=\"reduce\">-</span>"+
                                "<input class=\"count-input\" type=\"text\"value=\"1\" />"+
                                "<span class=\"add\">+</span>"+
                            "</td>"+
                            "<td class=\"operation\">"+
                            "<span class=\"delete\">删除</span>"+
                            "</td>"+
                        "</tr>"
                    );
                });
                
                $("body").on("click",".delete",function(){
                    $(this).parent().parent().remove();
                });
            });
        </script>
    </head>
    <body>
        <h1 style="text-align: center;margin-bottom: 25px;margin-top: 25px;">书店小商城(软件1班唐臣)</h1>
        <div class="catbox">
            <button class="button3 button2" id="btn">增加商品</button>
            <button class="button4 button1">全部删除</button>
            <table id="cartTable">
                <thead>
                    <tr>
                        <th><label><input class="check-all check" type="checkbox" />&nbsp;全选</label></th>
                        <th>商品</th>
                        <th>单价(元)</th>
                        <th>数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                        <td class="goods">
                            <img src="images/fusheng.jpg" alt="" />
                            <span>书名：《浮生》</span>
                            <span>作者：余华</span>
                        </td>
                        <td class="price">53.23</td>
                        <td class="count">
                            <span class="reduce">-</span>
                            <input class="count-input" type="text"value="1" />
                            <span class="add">+</span>
                        </td>
                        <td class="operation"><span class="delete">删除</span></td>
                    </tr>
                    
                    <tr>
                        <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                        <td class="goods">
                            <img src="images/hongloumeng.jpg" alt="" />
                            <span>书名：《红楼梦》</span>
                            <span>作者：曹雪芹</span>
                        </td>
                        <td class="price">46.23</td>
                        <td class="count">
                            <span class="reduce">-</span>
                            <input class="count-input" type="text"value="1" />
                            <span class="add">+</span>
                        </td>
                        <td class="operation"><span class="delete">删除</span></td>
                    </tr>
                    
                    <tr>
                        <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                        <td class="goods">
                            <img src="images/sanguo.jpg" alt="" />
                            <span>书名：《三国演义》</span>
                            <span>作者：罗贯中</span>
                        </td>
                        <td class="price">70.23</td>
                        <td class="count">
                            <span class="reduce">-</span>
                            <input class="count-input" type="text"value="1" />
                            <span class="add">+</span>
                        </td>
                        <td class="operation"><span class="delete">删除</span></td>
                    </tr>
                    
                    <tr>
                        <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                        <td class="goods">
                            <img src="images/xusanguan.jpg" />
                            <span>书名：《许三观卖血记》</span>
                            <span>作者：余华</span>
                        </td>
                        <td class="price">13.60</td>
                        <td class="count">
                            <span class="reduce">-</span>
                            <input class="count-input" type="text" value="1" />
                            <span class="add">+</span>
                        </td>
                        <td class="operation"><span class="delete">删除</span></td>
                    </tr>
                </tbody>
            </table>
            
        </div>
    </body>
</html>

2、js文件主要是对页面全选按钮进行设置

window.onload = function() {
    
    //全选
    var selectInputs = document.getElementsByClassName(‘check‘);
    var checkAllInputs = document.getElementsByClassName(‘check-all‘)
    for (var i = 0; i < selectInputs.length; i++) {
        selectInputs[i].onclick = function() {
            if (this.className.indexOf(‘check-all‘) >= 0) {
                for (var j = 0; j < selectInputs.length; j++) {
                    selectInputs[j].checked = this.checked;
                }
            }
            if (!this.checked) {
                for (var i = 0; i < checkAllInputs.length; i++) {
                    checkAllInputs[i].checked = false;
                }
            }
        }
    }    
}

3、css文件布局

@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

a {
    color: #666;
    text-decoration: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
}

body {
    color: #666;
    font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}

clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.clearfix {
    display: inline-table
}

*html .clearfix {
    height: 1%
}

.clearfix {
    display: block
}

*+html .clearfix {
    min-height: 1%
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.catbox {
    width: 940px;
    margin: 0 auto;
}

.catbox table {
    text-align: center;
    width: 100%;
}


.catbox table th,
.catbox table td {
    border: 1px solid #CADEFF;
}

.catbox table th {
    background: #e2f2ff;
    border-top: 3px solid #a7cbff;
    height: 30px;
}

.catbox table td {
    padding: 10px;
    color: #444;
}

.catbox table tbody tr:hover {
    background: RGB(238, 246, 255);
}

.checkbox {
    width: 60px;
}

.goods {
    width: 300px;
}

.goods span {
    width: 180px;
    margin-top: 20px;
    text-align: left;
    float: left;
}

.goods img {
    width: 100px;
    height: 80px;
    margin-right: 10px;
    float: left;
}

.price {
    width: 130px;
}

.count {
    width: 90px;
}

.count .add,
.count input,
.count .reduce {
    float: left;
    margin-right: -1px;
    position: relative;
    z-index: 0;
}

.count .add,
.count .reduce {
    height: 23px;
    width: 17px;
    border: 1px solid #e5e5e5;
    background: #f0f0f0;
    text-align: center;
    line-height: 23px;
    color: #444;
}

.count .add:hover,
.count .reduce:hover {
    color: #f50;
    z-index: 3;
    border-color: #f60;
    cursor: pointer;
}

.count input {
    width: 50px;
    height: 15px;
    line-height: 15px;
    border: 1px solid #aaa;
    color: #343434;
    text-align: center;
    padding: 4px 0;
    background-color: #fff;
    z-index: 2;
}

.subtotal {
    width: 150px;
    color: red;
    font-weight: bold;
}

.operation span:hover,
a:hover {
    cursor: pointer;
    color: red;
    text-decoration: underline;
}

/* 按钮格式 */
.button3 {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 10px  20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 10px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    
}
.button4 {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 10px  20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 10px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    float: right;
    
}
.button2 {
    background-color: #426ab3; 
    color: whitesmoke; 
    
}

.button2:hover {
    background-color: #ff007f;
    color: black;
}
.button1 {
    background-color: #ff0000; 
    color: black; 
    
}

.button1:hover {
    background-color: #000000;
    color: white;
}

项目文件结构如下：

技术分享图片

juqery添加删除节点

原文：https://www.cnblogs.com/tangxiansen/p/14799155.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)