添加删除记录

用jQuery实现添加删除表格记录

实现效果如下：

#点击除名

#点击添加

#代码如下

• body部分

<table id="one">
        <thead>
            <caption>真🐖班点名册</caption>
        </thead>
        <tbody>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>101</td>
                <td>良小叶</td>
                <td>女</td>
                <td><a href="#">除名</a></td>
            </tr>
            <tr>
                <td>102</td>
                <td>雨小飞</td>
                <td>男</td>
                <td><a href="#">除名</a></td>
            </tr>
            <tr>
                <td>103</td>
                <td>百余鱼</td>
                <td>男</td>
                <td><a href="#">除名</a></td>
            </tr>
            <tr>
                <td>104</td>
                <td>陈文杰</td>
                <td>男</td>
                <td><a href="#">除名</a></td>
            </tr>
            <tr>
                <td>105</td>
                <td>李雨瞳</td>
                <td>女</td>
                <td><a href="#">除名</a></td>
            </tr>
        </tbody>
    </table>

    <table id="two">
        <thead>
            <caption>真🐖班名单添加</caption>
        </thead>
        <tbody>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            <tr>
                <td><input type="text" value="" id="num"></td>
                <td><input type="text" value="" id="name"></td>
                <td><input type="text" value="" id="sex"></td>
                <td><input type="submit" value="添加" id="btnSub"></td>
            </tr>

        </tbody>
    </table>

• style部分

<style>
        #one {
            border-style: solid;
            width: 500px;
            text-align: center;
            margin: 0 auto;
        }

        caption {
            text-align: center;
            margin: 25px;
        }

        #two {
            border-style: solid;
            width: 500px;
            height: 100px;
            text-align: center;
            margin: 0 auto;
        }

        input {
            width: 105px;
        }
    </style>

• jQuery部分

 $(function () {
            //1.添加记录
            //给提交按钮绑定事件监听
            $('#btnSub').click(function () {
                //获取要添加的数据
                var $num = $('#num');
                var $name = $('#name');
                var $sex = $('#sex');
                var num = $num.val();
                var name = $name.val();
                var sex = $sex.val();

                //将获取的数据添加到tr中
                var $new = $('<tr></tr>')
                    .append('<td>' + num + '</td>')
                    .append('<td>' + name + '</td>')
                    .append('<td>' + sex + '</td>')
                    .append('<td><a href="#">除名</a></td>')
                    .appendTo('#one>tbody');

                //给新添加的链接绑定事件监听
                $new.find('a').click(del);

                //添加完后清除two表格的数据
                $num.val('');
                $name.val('');
                $sex.val('');
            })

            //2.删除记录
            //给除名链接绑定事件监听
            $('#one a').click(del);

            function del() {
                //获取要删除的行
                var $tr = $(this).parent().parent();
                //获取要删除的学生姓名
                var name = $tr.children(':eq(1)').html();
                //判断是否要删除该学生
                if (confirm("是否要删除" + name + "同学？")) {
                    //是，则删除
                    $tr.remove();
                }
                return false;
            }
        })