参考：火辣辣前端博客
- 修改多选按钮默认样式，使input隐藏，添加UI设计给你的样式图片到标签i中，设置为背景图片。
- 在表格里面实现按钮的全选，点击标题栏，实现全选，或者点击表格每一行，也可以选中这一行
- 我们只根据UI给的设计图写的前台界面，没有后台数据，所以数据我是通过纯js循环添加的，表格的分页也是根据这个来分页的，与后台数据无关，就是纯js代码。可以上一页下一页首页尾页，也可以跳转到指定页面。
- 总结
- 很多不懂，我也是参考别人的
- 分页的js不能加在window.function(){}里面，不然没有作用，我也不知道为什么，求大神告知
- 很多input框的属性都是可以修改的，但是checkbox和radio不可以，所以需要自定义样式（我觉得就UI多事改啥样式啊
源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<style type="text/css">
body {
font-family: "微软雅黑";
margin: 0;
background: #FFFFFF;
}
table {
position: absolute;
width: auto;
text-align: center;
}
/*头部thead样式*/
thead tr th {
font-size: 14px;
line-height: 30px;
color: #66838e;
text-align: center;
}
/*主体tbody样式*/
tbody tr td {
font-size: 14px;
line-height: 39px;
color: #000000;
}
tbody tr td a {
font-size: 14px;
line-height: 39px;
color: #8E8E8E;
}
tbody tr td a:hover {
text-decoration: none;
color: #155CEC;
}
/*自定义多选框按钮样式*/
.checkbox {
display: inline-block;
cursor: pointer;
.checkbox input {
display: none;
}
.checkbox i {
position: relative;
top: 4px;
left: 10px;
display: block;
width: 18px;
height: 18px;
background: url('../img/unselected.png')left top no-repeat;
background-size: cover;
background-image: url('../img/unselected.png');
}
.checkbox input:checked+i {
background: url('../img/selected.png')left top no-repeat;
background-size: cover;
}
/*脚部tfoot样式*/
tfoot tr td {
position: relative;
font-size: 12px;
line-height: 36px;
color: #666666;
text-align: right;
}
.table_active {
text-decoration: none;
background: rgb(21, 101, 183);
border-radius: 3px;
color: #FFFFFF;
}
</style>
<body>
<div class="table">
<table id="table1" class="table table-condensed">
<thead>
<tr>
<th width="84px">
<label class="checkbox">
<input type="checkbox" id=""/><i></i>
</label>
</th>
<th width="121px">序号</th>
<th width="189px">用户名</th>
<th width="139px">密码</th>
<th width="700px">备注</th>
<th width="px">操作</th>
</tr>
</thead>
<tbody id="table2">
<!--添加表内容-->
</tbody>
<tfoot>
<tr>
<td colspan="6" id="span_nums">
<span id="spanFirst">首页</span>
<span id="spanPre">上页</span>
<span id="spanNext">下页</span>
<span id="spanPageNum"></span>
<span> <input style="width: 40px;" type="text" id="input_num" value="" /></span>
<span id="step_input_num">
<a href="#">转到</a>
</span>
<span id="spanLast">尾页</span>
</td>
</tr>
</tfoot>
</table>
<!--</form>-->
</div>
<!--js代码-->
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*表格隔行变色*/
var oTab1 = document.getElementById('table1');
for(var i = 0; i < oTab1.tBodies[0].rows.length; i++) {
if(i % 2) {
oTab1.tBodies[0].rows[i].style.background = 'rgb(255,255,255)';
} else {
oTab1.tBodies[0].rows[i].style.background = 'rgb(248,248,248)';
}
}
/*for循环添加数据*/
function addData() {
for(var i = 1; i <= 600; i++) {
//增加一行
var oTr = document.createElement('tr');
//增加第一列
var oTd = document.createElement('td');
oTd.innerHTML = '<label class="checkbox"><input type="checkbox" id=""/><i></i></label>';
oTr.appendChild(oTd);
//增加第二列
var oTd = document.createElement('td');
oTd.innerHTML = '20170110' + i;
oTr.appendChild(oTd);
//增加第三列
var oTd = document.createElement('td');
oTd.innerHTML = '张三' + i;
oTr.appendChild(oTd);
//增加第四列
var oTd = document.createElement('td');
oTd.innerHTML = '******' + i;
oTr.appendChild(oTd);
//增加第五列
var oTd = document.createElement('td');
oTd.innerHTML = '工号1010使用中';
oTr.appendChild(oTd);
//增加第六列
var oTd = document.createElement('td');
oTd.innerHTML = '<a class="tab-update">修改</a> <a class="tab-delete">删除</a>';
oTr.appendChild(oTd);
//增加一行至表格中
oTab1.tBodies[0].appendChild(oTr);
}
}
addData();
/*给删除添加点击事件*/
$('.tab-delete').click(function() {
$(this.parentNode.parentNode).remove();
});
/*全选*/
function initTableCheckbox() {
var $thr = $('table thead tr');
var $checkAll = $thr.find('label');
var $tbr = $('table tbody tr');
/*设置表头的第一个多选按钮作为全选或者反选按钮*/
$checkAll.click(function(event) {
$('tbody').find('input').prop('checked', true);
event.stopPropagation();
});
/*点击全选框单元格时，也会触发全选框的点击操作*/
$('table thead tr th').click(function() {
$(this).find('label').click();
});
/*点击每一行的选中复选框时*/
$tbr.find('label').click(function(event) {
$checkAll.prop('checked', $('tbody').find('input:checked').length == $tbr.length ? true : false);
event.stopPropagation();
});
/*点击每一行时也触发该行的选中操作*/
$tbr.click(function() {
$(this).find('label').click();
});
}
initTableCheckbox();
/*分页功能开始*/
//增加显示得页码个数，并跳转到指定页面
function step_num(count) {
$("#span_nums").attr("length", '0');
for(var i = 1; i < count + 1; i++) {
if(i == 1) {
$("#spanNext").before($('<span id="num' + i + '" ><a id="' + i + '" class="table_active" href="javascript:numPage(' + (i - 1) + ');">' + ' ' + i + ' ' + '</a></span>'));
} else {
$("#spanNext").before($('<span id="num' + i + '" ><a id="' + i + '" href="javascript:numPage(' + (i - 1) + ');">' + ' ' + i + ' ' + '</a></span>'));
}
}
}
var theTable = document.getElementById("table2");
var totalPage = document.getElementById("spanTotalPage");
var pageNum = document.getElementById("spanPageNum");
var spanPre = document.getElementById("spanPre");
var spanNext = document.getElementById("spanNext");
var second = document.getElementById("second");
var spanFirst = document.getElementById("spanFirst");
var spanLast = document.getElementById("spanLast");
var numberRowsInTable = theTable.rows.length;
var pageSize = 10; //页面显示数据的条数
var page = 1;
var now = 0;
//下一页
function nextPage() {
hideTable();
currentRow = pageSize * page;
maxRow = currentRow + pageSize;
if(maxRow > numberRowsInTable) maxRow = numberRowsInTable;
for(var i = currentRow; i < maxRow; i++) {
theTable.rows[i].style.display = '';
}
page++;
if(maxRow == numberRowsInTable) {
nextText();
lastText();
}
showPage();
preLink();
firstLink();
}
function numPage(page) { //跳转到指定页面，page接收点击的值
hideTable();
currentRow = pageSize * page;
maxRow = currentRow + pageSize;
if(maxRow > numberRowsInTable) maxRow = numberRowsInTable;
for(var i = currentRow; i < maxRow; i++) {
theTable.rows[i].style.display = '';
}
//跳转到指定页面时，页码颜色样式变化
for(var j = 1; j < totalPage.innerHTML; j++) {
document.getElementById(j).className = '';
}
document.getElementById(page + 1).className = 'table_active';
page++;
if(maxRow == numberRowsInTable) {
nextText();
lastText();
}
showPage();
preLink();
firstLink();
}
/*跳转到指定页面*/
var input_num = document.getElementById('input_num');
var step_input_num = document.getElementById('step_input_num');
/*跳转的点击事件*/
step_input_num.onclick = function() {
if(input_num.innerHTML != 0) {
var getnum = input_num.value - 1;
numPage(getnum);
}
};
/*输入框的键盘的回车事件*/
input_num.onkeydown = function(ev) {
var oEvent = ev || event;
if(oEvent.keyCode == 13 && input_num.innerHTML != 0) {
var getnum = input_num.value - 1;
numPage(getnum);
}
};
//上一页
function prePage() {
hideTable();
page--;
currentRow = pageSize * page;
maxRow = currentRow - pageSize;
if(currentRow > numberRowsInTable) currentRow = numberRowsInTable;
for(var i = maxRow; i < currentRow; i++) {
theTable.rows[i].style.display = '';
}
if(maxRow == 0) {
preText();
firstText();
}
showPage();
nextLink();
lastLink();
}
//第一页
function firstPage() {
hideTable();
// page = 1;
for(var i = 0; i < pageSize; i++) {
theTable.rows[i].style.display = '';
}
showPage();
firstText();
preText();
nextLink();
lastLink();
}
//最后一页
function lastPage() {
hideTable();
page = pageCount();
currentRow = pageSize * (page - 1);
for(var i = currentRow; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = '';
}
showPage();
preLink();
nextText();
firstLink();
lastText();
}
function hideTable() {
for(var i = 0; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = 'none';
}
}
function showPage() {
pageNum.innerHTML = page;
}
//总共页数
function pageCount() {
var count = 0;
if(numberRowsInTable % pageSize != 0) count = 1;
return parseInt(numberRowsInTable / pageSize) + count;
}
//显示链接
function preLink() {
spanPre.innerHTML = "<a href='javascript:prePage();'>上页</a>";
}
function preText() {
spanPre.innerHTML = "上页";
}
function nextLink() {
spanNext.innerHTML = "<a href='javascript:nextPage();'>下页</a>";
}
function nextText() {
spanNext.innerHTML = "下页";
}
function firstLink() {
spanFirst.innerHTML = "<a href='javascript:firstPage();'>首页</a>";
}
function firstText() {
spanFirst.innerHTML = "首页";
}
function lastLink() {
spanLast.innerHTML = "<a href='javascript:lastPage();'>尾页</a>";
}
function lastText() {
spanLast.innerHTML = "尾页";
}
//只显示第一页的数据
function showfirstPage() {
for(var i = pageSize; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = 'none';
}
var count = pageCount();
totalPage.innerHTML = pageCount();
pageNum.innerHTML = '1';
step_num(count);
nextLink();
lastLink();
}
showfirstPage();
/*分页功能结束*/
</script>
</body>
</html>
655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
