JavaScript（jQuery）动态添加/删除html列表
程序员文章站
2022-05-30 10:16:28
...
源码地址
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>条记录，当前显示第 <i class="blue">1 </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="确定" />
<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');
}上一篇： 算法动画图解
下一篇： 运行第一个Docker容器