jQuery练习3--添加和删除记录

最新推荐文章于 2022-11-12 20:08:14 发布

jiaody111

最新推荐文章于 2022-11-12 20:08:14 发布

阅读量227

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_42139212/article/details/103476549

版权

jQuery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <script>
        $(function () {
            $('a').click(remove)
            $('#addEmpButton').click(function () {
                var name = $('#empName').val();
                var email = $('#email').val();
                var salary = $('#salary').val();
                $('<tr></tr>').append('<td>'+name+'</td>').append('<td>'+email+'</td>').append('<td>'+salary+'</td>')
                    .append('<td><a href="deleteEmp?id="+id>Delete</a></td>')
                    .appendTo($('#employeeTable'))
                    .find('a').click(remove)
            })
            function remove(event) {
                var $trEle = $(this).parent().parent();
                var name = $trEle.children('td:first').html();
                if(confirm('确认删除'+name+'的信息吗？')){
                    $trEle.remove();
                }
                event.preventDefault();
            }
        })
    </script>
</head>
<body>
<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</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>
    <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
    </tr>

</table>

<div id="formDiv">

    <h4>添加新员工</h4>

    <table>
        <tr>
            <td class="word">name:</td>
            <td class="inp">
                <input type="text" name="empName" id="empName"/>
            </td>
        </tr>
        <tr>
            <td class="word">email:</td>
            <td class="inp">
                <input type="text" name="email" id="email"/>
            </td>
        </tr>
        <tr>
            <td class="word">salary:</td>
            <td class="inp">
                <input type="text" name="salary" id="salary"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton" value="abc">
                    Submit
                </button>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

在这里插入图片描述