欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript(jQuery)动态添加/删除html列表

程序员文章站 2022-05-30 10:16:28
...

JavaScript(jQuery)动态添加/删除html列表

源码地址
http://download.csdn.net/download/qq_28934205/10209983

list.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/userlist.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".click").click(function() {
                    $(".tip").fadeIn(200);
                });

                $(".tiptop a").click(function() {
                    $(".tip").fadeOut(200);
                });

                $(".sure").click(function() {
                    $(".tip").fadeOut(100);
                });

                $(".cancel").click(function() {
                    $(".tip").fadeOut(100);
                });

            });
        </script>

    </head>

    <body>
        <div class="place">
            <span>位置:</span>
            <ul class="placeul">
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">用户管理</a>
                </li>
                <li>
                    <a href="#">用户列表</a>
                </li>
            </ul>
        </div>

        <div class="rightinfo">

            <div class="tools">

                <ul class="toolbar">
                    <li class="click"><span><img src="images/t01.png" /></span>添加</li>
                    <li class="click"><span><img src="images/t02.png" /></span>修改</li>
                    <li class="click"><span><img src="images/t03.png" /></span>删除</li>
                    <li class="click"><span><img src="images/t04.png" /></span>统计</li>
                </ul>

                <ul class="toolbar1">
                    <li class="click"><span><img src="images/t05.png" /></span>设置</li>
                </ul>

            </div>

            <table class="tablelist">
                <thead>
                    <tr>
                        <th><input name="" type="checkbox" value="" /></th>
                        <th>编号<i class="sort"><img src="images/px.gif" /></i></th>
                        <th>用户</th>
                        <th>密码</th>
                        <th>发布时间</th>
                        <th>是否审核</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="stable">
                    <tr>
                        <td><input name="" type="checkbox" value="" /></td>
                        <td>20130908</td>
                        <td>admin</td>
                        <td>44864686</td>
                        <td>2013-09-09 15:05</td>
                        <td>已审核</td>
                        <td>
                            <a href="#" class="tablelink">查看</a>
                            <a onclick="del(this)" href="#" class="tablelink"> 删除</a>
                        </td>
                    </tr>

                    <tr>
                        <td><input name="" type="checkbox" value="" /></td>
                        <td>20130907</td>
                        <td>uimaker</td>
                        <td>464646464</td>
                        <td>2013-09-08 14:02</td>
                        <td>未审核</td>
                        <td>
                            <a href="#" class="tablelink">查看</a>
                            <a onclick="del(this)" href="#" class="tablelink">删除</a>
                        </td>
                    </tr>

                </tbody>
            </table>

            <div class="pagin">
                <div class="message"><i class="blue">1256</i>条记录,当前显示第&nbsp;<i class="blue">1&nbsp;</i></div>
                <ul class="paginList">
                    <li class="paginItem">
                        <a href="javascript:;"><span class="pagepre"></span></a>
                    </li>
                    <li class="paginItem current">
                        <a href="javascript:;">1</a>
                    </li>
                    <li class="paginItem">
                        <a href="javascript:;">2</a>
                    </li>
                    <li class="paginItem">
                        <a href="javascript:;">3</a>
                    </li>
                    <li class="paginItem">
                        <a href="javascript:;">4</a>
                    </li>
                    <li class="paginItem">
                        <a href="javascript:;">5</a>
                    </li>
                    <li class="paginItem more">
                        <a href="javascript:;">...</a>
                    </li>
                    <li class="paginItem">
                        <a href="javascript:;">10</a>
                    </li>
                    <li class="paginItem">
                        <a href="javascript:;"><span class="pagenxt"></span></a>
                    </li>
                </ul>
            </div>

            <div class="tip">
                <div class="tiptop"><span>提示信息</span>
                    <a></a>
                </div>

                <div class="tipinfo">
                    <span><img src="images/ticon.png" /></span>
                    <div class="tipright">
                        <p>是否确认对信息的修改 ?</p>
                        <cite>如果是请点击确定按钮 ,否则请点取消。</cite>
                    </div>
                </div>

                <div class="tipbtn">
                    <input name="" type="button" class="sure" value="确定" />&nbsp;
                    <input name="" type="button" class="cancel" value="取消" />
                </div>
            </div>
        </div>

        <script type="text/javascript">
            $('.tablelist tbody tr:odd').addClass('odd');
        </script>

    </body>

</html>

userlist.js

//删除
function del(id) {
    var o = $(id).parents('tr');
    o.remove();
    var id = o.attr("id");

    alert("移除数据id="+id);
};
window.onload = function() {
    getUserList();
};

function getUserList() {
    $.ajax({
        url: 'userlist',
        type: 'get',
        dataType: "json",
        success: function(json) {
            var jsonObj = jQuery.parseJSON(json);
            if(jsonObj.success) {
                showlist(jsonObj);
            } else {
                alert(jsonObj.msg);
            }
        },
        error: function(xhr, status, error) {
            var json = '{\"data\":[{\"age\":18,\"id\":1,\"password\":\"sfasgfaf\",\"userName\":\"测试\"},{\"age\":20,\"id\":2,\"password\":\"123456\",\"userName\":\"user\"}],\"msg\":\"成功\",\"success\":true}';
            var jsonObj = jQuery.parseJSON(json);
            showlist(jsonObj.data);
        }
    });
}

function showlist(userlist) {
    var str = '';
    for(var i = 0; i < userlist.length; i++) {
        var user = userlist[i];
        str += '<tr id=' + user.id + '>';
        str += '<td><input name="" type="checkbox" value= ""/></td>';
        str += '<td>' + user.id + '</td>';
        str += '<td>' + user.userName + '</td>';
        str += '<td>' + user.password + '</td>';
        str += '<td>2013-09-09 15:05</td>';
        str += '<td>已审核</td>';
        str += '<td><a href="#" class="tablelink">  查看  </a><a onclick="del(this)" href="#" class="tablelink">  删除   </a></td>';
        str += '</tr>'; //拼接str
    }
    $("#stable").empty(); //清空子元素
    $("#stable").append(str); //添加元素
    $('.tablelist tbody tr:odd').addClass('odd');

}