JavaScript（jQuery）动态添加/删除html列表
2018-01-17 14:52
555 查看
源码地址
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');
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript动态改变HTML页面元素例如添加或删除
- JavaScript（20）jQuery HTML 添加和删除元素
- javascript jquery 动态添加删除行 (兼容所有浏览器)
- 用javascript动态添加删除文本框(轉自:http://www.diybl.com/course/1_web/javascript/jsjs/200838/103423.html)
- JavaScript动态改变HTML页面元素例如添加或删除
- jquery 动态添加和删除 ul li列表
- JavaScript 动态删除/添加HTML表单元素（可以浏览本地文件）
- jQuery + JavaScript 实现的动态添加文本框功能 和 动态删除文本框功能（二）
- jQuery使用toggleClass方法动态添加删除Class样式的方法
- js动态的把左边列表添加到右边，可删除。
- 用Javascript动态添加和删除表格行
- 利用jquery给指定的table动态添加一行、删除一行
- JavaScript（20）jQuery HTML 加入和删除元素
- 用Javascript动态添加删除HTML元素实例 (转载)
- javascript里面的数组，json对象，动态添加，修改，删除示例
- jquery实现动态添加控件，删除控件，页面性能优化
- JavaScript---动态添加删除属性与方法和对象构造方法
- JQuery动态给table添加、删除行 改进版
- JavaScript实现动态删除列表框值的方法
- javascript表格动态添加删除行/列