jquery案例12——动态添加输入内容、创建元素、插入元素、删除元素

最新推荐文章于 2023-05-29 08:51:30 发布

耶啵奶膘

最新推荐文章于 2023-05-29 08:51:30 发布

阅读量463

点赞数

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

本文链接：https://blog.csdn.net/xulihua_75/article/details/124810126

版权

jquery 专栏收录该内容

18 篇文章 3 订阅

订阅专栏

这个案例展示了如何使用jQuery在HTML表格中动态添加和删除元素。用户可以通过输入框添加水果名称和价格，点击添加按钮将新行插入表格，同时提供删除按钮实现行的移除。代码实现了事件绑定，确保新添加的元素同样具备删除功能。

摘要由CSDN通过智能技术生成

一、案例描述

创建元素
动态插入元素
删除元素

二、案例效果演示

请添加图片描述

三、案例整体代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格添加内容</title>
    <script src="./js/jQuery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #container {
            padding: 50px;
        }
        
        table {
            text-align: center;
        }
        
        .addBox {
            /* border: 1px solid red; */
            width: 200px;
            margin-top: 50px;
        }
        
        input {
            outline: none;
            width: 100%;
            border: none;
            border: 1px solid #000;
            height: 30px;
            margin-bottom: 10px;
        }
        
        .add {
            width: 100%;
            height: 30px;
            line-height: 30px;
            background-color: green;
            color: #fff;
            text-align: center;
        }
        
        .del:hover {
            color: red;
        }
    </style>
</head>

<body>
    <div id="container">
        <table border="1" cellspacing="0" width="200px">
            <tr>
                <th width="100px">水果名称</th>
                <th width="50px">价格</th>
                <th width="50px">操作</th>
            </tr>
            <tr>
                <td>苹果</td>
                <td>4.5元</td>
                <td><span class="del">删除</span></td>
            </tr>
            <tr>
                <td>香蕉</td>
                <td>1.5元</td>
                <td><span class="del">删除</span></td>
            </tr>
        </table>
        <div class="addBox">
            <input type="text" placeholder="请输入水果名称" id="fruitName" /><br />
            <input type="text" placeholder="请输入水果价格" id="fruitPrice" />
            <div class="add">添加</div>
        </div>
    </div>
    <script>
        $(function() {
            // 当点击添加按钮时， 将里面的内容获取到并创建tr, 然后插入到表格最下方。
            $('.add').click(function() {
                var $fruitName = $('#fruitName').val();
                var $fruitPrice = $('#fruitPrice').val();
                // console.log($fruitName);
                // console.log($fruitPrice);
                var tr = $('<tr><td>' + $fruitName + '</td><td>' + $fruitPrice + '</td><td><span class="del">删除</span></td></tr>');
                $('table').append(tr);
                $('#fruitName').val('');
                $('#fruitPrice').val('');
                // 坑：新创建的元素是没有绑定老事件的，我们需要自行绑定一个事件，以及她要干的事
                tr.find(".del").click(function() {
                    $(this).parent().parent().remove();
                });
            });
            // 删除按钮
            $('.del').click(function() {
                $(this).parents('tr').remove();
            });
        });
    </script>
</body>

</html>

耶啵奶膘

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jquery案例12——动态添加输入内容、创建元素、插入元素、删除元素

一、案例描述创建元素动态插入元素删除元素二、案例效果演示三、案例整体代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
复制链接

扫一扫

专栏目录