jQuery练习 动态添加、删除

学习使用jQuery每日练习

实现动态添加和删除功能


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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=$("" +
                    ""+ name +"" +
                    ""+ email +"" +
                    ""+ salary +"" +
                    "Delete" +
                "");
            $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>Nameth>
        <th>Emailth>
        <th>Salaryth>
        <th> th>
    tr>

    <tr>
        <td>Tomtd>
        <td>[email protected]td>
        <td>3000td>
        <td><a href="deleteEmap?id=001">Deletea>td>
    tr>

    <tr>
        <td>Barrytd>
        <td>[email protected]td>
        <td>5000td>
        <td><a href="deleteEmap?id=002">Deletea>td>
    tr>

    <tr>
        <td>Tonytd>
        <td>[email protected]td>
        <td>7000td>
        <td><a href="deleteEmap?id=003">Deletea>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">Submitbutton>
            td>
        tr>
    table>
div>

body>
html>

1.运行界面

1.删除jQuery练习 动态添加、删除_第1张图片

2.添加

jQuery练习 动态添加、删除_第2张图片
jQuery练习 动态添加、删除_第3张图片

jQuery练习 动态添加、删除_第4张图片
jQuery练习 动态添加、删除_第5张图片jQuery练习 动态添加、删除_第6张图片

你可能感兴趣的:(JavaWeb学习)