jQuery实现增加和删除功能-蒲公英云

jQuery实现增加和删除功能

以你之姓@ 2022-12-02 12:30 274阅读 0赞

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>用jQuery实现增加和删除</title>
        <style type="text/css">
            #table1{
                height: 200px;
                width: 500px;
                border: solid 1px black;
                margin: 0 auto;
            }
            #table1 td{
                width: 500px;
                height: 30px;
                border: solid 1px black;
            }
            #table1 th{
                width: 500px;
                height: 30px;
                border: solid 1px black;
            }
            #form1{
                width: 500px;
                height: 300px;
                border: solid 1px black;
                margin: 0 auto;
            }
        </style>
        <script type="text/javascript" src="../js/jquery-3.1.1/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //删除
//                $('#tbody1 a').click(function(){
//                    var $theTr = $(this).parent().parent();//找到点击的超链接的tr
//                    var name = $theTr.children(':first').html();
//                    if(confirm("确定删除"+name+"吗?")){
//                        $theTr.remove();
//                    }
//                    
//                    });
/*使用事件的委派，$(parentElement).delegate(childrenElemnet,eventName,callback),
 * 移除事件的委派用$(parentElement).undelegate(eventName)
 */
                $('#tbody1').delegate('a','click',function(){
                    var $theTr = $(this).parent().parent();//找到点击的超链接的tr
                    var name = $theTr.children(':first').html();
                    if(confirm("确定删除"+name+"吗?")){
                        $theTr.remove();
                }
                });
            //添加
            $('#button1').click(function(){
                //得到输入的数据
                var name = $('#name').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="javascript:;">Delete</a></td>')
                .appendTo('#tbody1');
//                .find('a').click(function(){
//                    var $theTr = $(this).parent().parent();//找到点击的超链接的tr
//                    var name = $theTr.children(':first').html();
//                    if(confirm("确定删除"+name+"吗?")){
//                        $theTr.remove();
//                    });
                //清除输入
                $('#name').val("");
                $('#email').val("");
                $('#salary').val("");
            });
            });
        </script>
    </head>
    <body>
        <table id="table1" cellspacing="0">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Salary</th>
                    <th>Del</th>
                </tr>
            </thead>
            <tbody id="tbody1">
                <tr>
                    <td>Tom</td>
                    <td>tom@tom.com</td>
                    <td>5000</td>
                    <td><a href="javascript:;">Delete</a></td>
                </tr>
                <tr>
                    <td>Jerry</td>
                    <td>jerry@jerry.com</td>
                    <td>8000</td>
                    <td><a href="javascript:;">Delete</a></td>
                </tr>
                <tr>
                    <td>Bob</td>
                    <td>Bob@bob.com</td>
                    <td>10000</td>
                    <td><a href="javascript:;">Delete</a></td>
                </tr>
            </tbody>
        </table>
        <br /><br />
        <h2>添加新元素</h2>
        <table id="table2">
            <tr>
                <td>name:</td>
                <td><input type="text" id="name"/></td>
            </tr>
            <tr>
                <td>email:</td>
                <td><input type="text" id="email"/></td>
            </tr>
            <tr>
                <td>salary:</td>
                <td><input type="text" id="salary"/></td>
            </tr>
            <tr>
                <td colspan="2" align="center"> </td>
                <td><button id="button1">submit</button></td>
            </tr>
        </table>
    </body>
</html>