动态给表格添加删除行

最新推荐文章于 2023-11-30 09:18:07 发布

M24女孩不秃头喔！

最新推荐文章于 2023-11-30 09:18:07 发布

阅读量97

点赞数 1

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_57401304/article/details/117534151

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>Document</title>
    <script src="../vS资源/jquery/js/jquery-2.0.0.min.js"></script>
    <script>
        $(function () {
            // 删除行，删除当前a标签的父级的父级
            function deleFun() {
                // 获取当前a的父级的父级
                var $rowTr = $(this).parent().parent();
                var $name = $rowTr.find("td:first").text();
                // alert($name)
                // 移除时做判断，显示移除的行的name
                if (confirm("你确定要删除[" + $name + "]")) {
                    // 用remove移除
                    $rowTr.remove();
                }
                return false;
            }
            // 添加内容
            // 获取提交
            $("input[type=submit]").click(function () {
                // alert("a")
                // 获取新添加的值
                var $tex01 = $("#inp01").val();
                var $tex02 = $("#inp02").val();
                var $tex03 = $("#inp03").val();
                // 创建tr和td,传递内容值
                var $newObj = $(
                    "<tr>" +
                    "<td>" + $tex01 + "</td>"
                    + "<td>" + $tex02 + "</td>"
                    + "<td>" + $tex03 + "</td>"
                    + "<td><a href=\"deleteEmp?id=002\">删除</a></td>"
                    + "</tr>"
                );
                // 将行和列赋给表格
                $newObj.appendTo($("#sel1"));
                // 删除新创的行
                $newObj.find("a").click(deleFun);
            });
            $("a").click(deleFun)
        })
    </script>
</head>

<body>
    <table id="sel1" align="center" border="1">
        <tr>
            <th>name:</th>
            <th>email:</th>
            <th>salary:</th>
            <th></th>
        </tr>
        <tr>
            <td>tom</td>
            <td>1528466@qq.com</td>
            <td>5200</td>
            <td><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>bob</td>
            <td>1528466@qq.com</td>
            <td>5200</td>
            <td><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>swallow</td>
            <td>1528466@qq.com</td>
            <td>5200</td>
            <td><a href="#">删除</a></td>
        </tr>
    </table>
    <table id="sel2">
        <div>
            <h3>欢迎新人</h3>
            <span></span>
        </div>
        <ul>
            <li><span>用户名称</span><input type="text" placeholder="请输入内容" id="inp01"></li>
            <li><span>用户邮箱</span><input type="text" placeholder="请输入内容" id="inp02"></li>
            <li><span>用户薪资</span><input type="text" placeholder="请输入内容" id="inp03"></li>
            <li><input type="submit" value="提交"></li>
        </ul>
    </table>
</body>

</html>

M24女孩不秃头喔！

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态给表格添加删除行

<!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>Do
复制链接

扫一扫

专栏目录