实训第二天的代码优化

来源：互联网发布：增加淘宝店铺流量编辑：程序博客网时间：2024/05/16 08:48

在实训第二天之bootstrap首页框架（二)中写了关于用户信息的增删改代码，由于当时学艺不精，方式较为麻烦，今天使用了.siblings()和.parent()两个方法，可以更加轻易的获取到整行。话不多说代码如下：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />        <script src="../css/jquery.min.js" type="text/javascript" charset="UTF-8"></script>        <script src="../css/bootstrap.min.js"></script>        <script type="text/javascript">            //删除:            function del(obj) {                $(obj).parent().parent().remove();            }            function add(id,user,tel,email) {                str = "<tr>";                str +=                    '<td>' + id + '</td>' +                    '<td>' + user + '</td>' +                    '<td>' + tel + '</td>' +                    '<td>' + email + '</td>' +                    '<td>' + '<button type="button"  onclick="del(this)">删除</button>' + '<button type="button" style="margin-left: 15px" onclick="update(this)">修改</button>' + '</td>'                str += '</tr>'                $('#tb').append(str)            }            function save(obj) {                var tb1 = $(obj)                str = "";                str +=                    '<td>' + $('#userid').val() + '</td>' +                    '<td>' + $('#username').val() + '</td>' +                    '<td>' + $('#usertel').val() + '</td>' +                    '<td>' + $('#useremail').val() + '</td>' +                    '<td>' + '<button type="button"  onclick="del(this)">删除</button>' + '<button type="button" style="margin-left: 15px" onclick="update(this)">修改</button>' + '</td>'                $($(tb1.parent().parent())).html(str)            }            function update(obj) {                var tb1 = $(obj)                var tb2 = $(tb1.parent().siblings())                var message = new Array()                $.each(tb2, function(index, item) {                    item = $(item)                    message.push(item.text())                })                str = "";                str +=                    '<td>' + '<input type="text" id="userid" value="' + message[0] + '" />' + '</td>' +                    '<td>' + '<input type="text" id="username" value="' + message[1] + '" />' + '</td>' +                    '<td>' + '<input type="text" id="usertel" value="' + message[2] + '" />' + '</td>' +                    '<td>' + '<input type="text" id="useremail" value="' + message[3] + '" />' + '</td>' +                    '<td>' + '<button type="button"  onclick="del(this)">删除</button>' + '<button type="button" style="margin-left: 15px" onclick="save(this)">保存</button>' + '</td>'                $($(tb1.parent().parent())).html(str)            }            $( //加载                function() {                    $.ajax({                        type: "get",                        url: "../user.json",                        async: true,                        success: function(result) {                            var str = '';                            $.each(result, function(index, item) {                                str = "<tr>";                                str +=                                    '<td>' + item.id + '</td>' +                                    '<td>' + item.user + '</td>' +                                    '<td>' + item.tel + '</td>' +                                    '<td>' + item.email + '</td>' +                                    '<td>' + '<button type="button"  onclick="del(this)">删除</button>' + '<button type="button" style="margin-left: 15px" onclick="update(this)">修改</button>' + '</td>'                                str += '</tr>'                                $('#tb').append(str)                            });                        },                    });                    //添加:                    $('#add').click(function() {                        $('#add-modal').modal('toggle')                    })                    $('#save').click(function() {                        var id = $('#newid')                        var user = $('#newuser')                        var tel = $('#newtel')                        var mail = $('#newmail')                        add(id.val(),user.val(),tel.val(),mail.val())                        return true;                    })                })        </script>        <title></title>    </head>    <body>        <div class="container-fluid">            <div class="form-inline">                用户名：                <input type="text" id="uname" class="form-control" /> 手机号:                <input type="text" class="form-control" />                <button id="search" type="button" class="btn btn-primary">检索</button>                <button id="add" type="button" class="btn btn-danger">添加</button>            </div>            <h3>用户信息</h3>            <table id="tb" class="table table-bordered table-striped table-hover ">                <tr>                    <td>id</td>                    <td>用户名</td>                    <td>手机号</td>                    <td>邮箱</td>                    <td>操作</td>                </tr>            </table>        </div>        <div class="modal fade" id="add-modal">            <div class="modal-dialog">                <div class="modal-content">                    <div class="modal-header">                        <div style="font-size: large; color: #204D74;">添加用户</div>                    </div>                    <div class="modal-body">                        <div class="form-inline">                            <table id="tb" class="table table-bordered table-striped table-hover ">                                <div class="form-control">                                    id:                                    <input id="newid" type="text" placeholder="请输入id" />                                </div>                                <tr>                                    <td>用户名:                                        <input id="newuser" type="text" placeholder="请输入用户名" />                                    </td>                                </tr>                                <tr>                                    <td>手机号:                                        <input id="newtel" type="text" placeholder="请输入手机号" />                                    </td>                                </tr>                                <tr>                                    <td>邮箱:                                        <input id="newmail" type="text" placeholder="请输入邮箱" />                                    </td>                                </tr>                            </table>>                        </div>                    </div>                    <div class="modal-footer">                        <button id="save" type="button" class="btn btn-primary" data-dismiss="modal">保存</button>                    </div>                </div>            </div>        </div>    </body></html>

在原先的代码中，由于初学jquery对其中的方法够熟悉。所以在获取值的时候产生了较大的阻碍，采取在动态生成每个tr标签的时候给其添加id便于用$(‘#id”)进行获取。后来改为了this指针，通过.parent()方法和.siblings()方法来获取当前元素的父节点和兄弟节点。可以更加简单灵活的获取值。

阅读全文

0 0