Dom的增删改

最新推荐文章于 2022-07-15 19:10:18 发布

衰小孩、519

最新推荐文章于 2022-07-15 19:10:18 发布

阅读量136

点赞数

分类专栏： JavaWeb 文章标签： javaweb

本文链接：https://blog.csdn.net/A_JOKER___/article/details/121151788

版权

JavaWeb 专栏收录该内容

86 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用jQuery库进行DOM操作，包括内部插入的appendTo()和prependTo()，外部插入的insertAfter()和insertBefore()，替换元素的replaceWith()和replaceAll()，以及删除元素的remove()和empty()方法。示例代码展示了如何在表格中动态添加、删除和编辑员工记录，涉及事件绑定和用户交互。

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

主要方法

内部插入
1. appendTo()：插入元素（插入末尾）
	a.appendTo(b)：把a插入到b子元素末尾，成为最后一个子元素
2. prependTo()：插入元素（插入开头）
	a.prependTo(b)：把a插入到b子元素开头，成为第一个子元素

外部插入
3. insertAfter()：添加元素至后面
	a.insertAfter(b)：将a加到b后面，得到ba
4. insertBefore()：添加元素至前面
	a.insertBefore(b)：将a加到b前面，得到ab

替换
5. replaceWith()：替换所有匹配元素
	a.replaceWith(b)：用b替换a
6. replaceAll()：替换所有匹配元素
	a.replaceAll(b)：用a替换b

删除
7. remove()：删除
	a.remove()：删除a标签
8. empty()：清空内容
	a.empty()：清空a标签里的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table{
            border: 1px solid black;
            margin: 0 auto;
            border-collapse: collapse;
        }

        tr,th,td{
            border: 1px solid black;
        }

        div{
            border: 1px solid black;
            width: 300px;
            height: 200px;
            text-align: center;
            margin: 0 auto;
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="../jQuery包/jquery.min.js"></script>
    <script>
        $(function (){
            //封装删除函数
            var deletefun=function (){
                var obj1 = $(this).parent().parent();
                var name = obj1.find("td:first").text();
                //confirm是JavaScript语言提供的一个确认提示框函数。你给它传什么，它就提示什么
                //当用户点击了确定返回true，当用户点击取消返回false
                if (confirm("是否确认删除"+name)){
                    obj1.remove();
                }
                //return false;可以阻止元素的默认行为
                return false;
            }

            //为删除按钮绑定单击事件
            $("a").click(deletefun);

            //为添加按钮绑定单击事件
            $("#but").click(function (){
                //获取输入框内容，姓名、邮箱、工资
                var name = $("#empName").val();
                var email = $("#email").val();
                var salary = $("#salary").val();

                //创建要添加的记录对象
                var obj = $("<tr>" +
                    "<td>"+name+"</td>" +
                    "<td>"+email+"</td>" +
                    "<td>"+salary+"</td>" +
                    "<td><a href=\"deleteEmp?id=002\">Delete</a></td>" +
                    "</tr>")

                //添加记录
                obj.appendTo($("#employeeTable"));

                //为新添加的行的a标签绑定点击事件
                obj.find("a").click(deletefun);
            })
        })
    </script>
</head>
<body>
<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th></th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href=" deleteEmp?id=001">Delete</a></td>
    </tr>
    <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002" >Delete</a></td>
    </tr>
</table>
<br/>
<div id="formDiv">
    <h4>添加新员工</h4>
    <tr>
        <td class="word">name: </td>
        <td class="inp">
            <input type="text" name= ”empName" id="empName" />
        </td>
    </tr><br/>
    <tr>
        <td class= "word" >email: </td>
        <td class="inp">
            <input type= "text" name= "email" id= "email" />
        </td>
    </tr><br/>
    <tr>
        <td class="word">salary:</td>
        <td class="inp">
            <input type="text" name= "salary" id="salary" />
        </td>
    </tr><br/><br/>
    <input type="button" id="but" value="提交">
</div>
</body>
</html>