jQuery实现表(table)的增、删功能

最新推荐文章于 2020-06-13 18:39:00 发布

嘘 -你听

最新推荐文章于 2020-06-13 18:39:00 发布

阅读量225

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_44657829/article/details/106043534

版权

java 同时被 3 个专栏收录

38 篇文章

订阅专栏

html

11 篇文章

订阅专栏

jquery

6 篇文章

订阅专栏

jQuery实现表(table)的增、删功能

js实现：https://blog.youkuaiyun.com/weixin_44657829/article/details/106043423

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.0.js"></script>
</head>
<body>
    用户名: <input type="text" id="username">
    年  龄: <input type="text" id="age">
    性  别: <input type="text" id="gender">
    <!-- 给按钮添加事件，在js中定义的方法 -->
    <button onclick="addData()">提交</button>
    <hr>
    <table id="dataContent" border="1" cellspacing="0" cellpadding="0" width="60%">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
    </table>
</body>
<script>
    var dataContent = $('#dataContent');
    function addData() {
        var username = $('#username').val();
        var age = $('#age').val();
        var gender = $('#gender').val();
        var trData = '<tr>' +
                        '<td>' + username + '</td>'      +
                        '<td>' + age + '</td>'           +
                        '<td>' + gender + '</td>'        +
                        '<td><button onclick="deleteData(this)">删除</button></td>' +
                    '</tr>';

        dataContent.append(trData);
    }

    // btnTag是指当前删除按钮, 是个dom对象
    function deleteData(btnTag) {
        // btnTag是个dom对象, 所以要使用 $(btnTag);
        // tr是button的祖先元素，就需要使用 parents方法.
        $(btnTag).parents('tr').remove();
    }
</script>
</html>