jQuery练习动态添加、删除

最新推荐文章于 2022-03-31 19:02:47 发布

司空不见惯

最新推荐文章于 2022-03-31 19:02:47 发布

阅读量512

点赞数

分类专栏： JavaWeb学习

本文链接：https://blog.youkuaiyun.com/qq_44961203/article/details/112060727

版权

JavaWeb学习专栏收录该内容

4 篇文章

订阅专栏

学习使用jQuery每日练习

实现动态添加和删除功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" type="text/css" href="">
<script  type="text/javascript" src="../../script/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(function(){

        //创建一个用于复用的删除的function函数
        var deleteFun = function(){

            // 在事件响应的function函数中，有一个this对象，这个this对象就是当前正在响应事件的dom对象
            // alert(this);
            var $strObj = $(this).parent().parent();
            var empname = $strObj.find("td:first").text();  //获取要删除事件的名字

            /*
            *  confirm是JavaScript语言提供的一个确认提示框函数，你给他传什么，它就提示什么
            *  当用户点击了确定，就返回true，当用户点击取消，则返回false
            * */
            if(confirm("你确定删除"+ empname +"的信息吗？")){
                // 行对象.remove();
                $strObj.remove();
            }
            return false;  //阻止元素默认行为 默认不跳转

        };


        //给submit按钮绑定单击事件
        $("#addEmpButton").click(function(){
            //获取输入框，姓名，邮箱，工资的内容
            var name = $("#empName").val();
            var email = $("#empEmail").val();
            var salary = $("#empSalary").val();



            //创建添加一个行标签对象，添加到显示数据的表格中
            $trObj=$("<tr>" +
                    "<td>"+ name +"</td>" +
                    "<td>"+ email +"</td>" +
                    "<td>"+ salary +"</td>" +
                    "<td><a href=\"deleteEmap?id=003\">Delete</a></td>" +
                "</tr>");
            $trObj.appendTo($("#employeeTable"));  //将行标签数据插入表格末端

        //    给创建添加的行的a标签绑定事件
            $trObj.find("a").click(deleteFun  );

        });


        // alert($("a").length);

        //给要删除的行的a标签绑定单击事件
        $("a").click( deleteFun ); //$("a").click(function(){})>>当前this响应的函数deleteFun ，
    });

</script>
</head>
<body>
<table id="employeeTable" border="1">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th> </th>
    </tr>

    <tr>
        <td>Tom</td>
        <td>Tom@tom.com</td>
        <td>3000</td>
        <td><a href="deleteEmap?id=001">Delete</a></td>
    </tr>

    <tr>
        <td>Barry</td>
        <td>Barry@barry.com</td>
        <td>5000</td>
        <td><a href="deleteEmap?id=002">Delete</a></td>
    </tr>

    <tr>
        <td>Tony</td>
        <td>Tony@tony.com</td>
        <td>7000</td>
        <td><a href="deleteEmap?id=003">Delete</a></td>
    </tr>


</table>

<div id="formDiv" >
    <h4>添加新员工</h4>

    <table border="1">
        <tr>
            <td>name:</td>
            <td><input type="text" name="empName" id="empName"/></td>
        </tr>
        <tr>
            <td>Email:</td>
            <td><input type="text" name="empEmail" id="empEmail"/></td>
        </tr>
        <tr>
            <td>Salary:</td>
            <td><input type="text" name="empSalary" id="empSalary"/></td>
        </tr>

        <tr>
            <td colspan="2" align="center">
                <button type="button" id="addEmpButton" value="abc">Submit</button>
            </td>
        </tr>
    </table>
</div>

</body>
</html>