misswell使用jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
<style>
.table-b table td ,.table-b table th {
border: 1px solid #F00
}
.table-b{
max-width:500px;
}
</style>
</head>
<body>
<div class="table-b">
<span class="operate-cols" data-id="dd" style="float:right;">显示更多字段</span>
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr id="dd">
<th width="105">ID</th>
<th width="181">网址</th>
<th width="112">功能</th>
<th width="112">操作</th>
</tr>
<tr>
<td>1</td>
<td>blog.liuguofeng.com</td>
<td>网站开发</td>
<td>添加</td>
</tr>
<tr>
<td>CSS5</td>
<td></td>
<td>CSS切图</td>
<td>添加</td>
</tr>
</table>
</div>
</body>
</html>
<style>
.operate-cols {
display: inline-block;
position: relative;
font-size: 12px;
}
.operate-cols-container {
position: absolute;
top: 30px;
right: 20px;
background-color: #FFF;
display: none;
font-size: 12px;
padding: 0 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.operate-cols-list {
position: relative;
min-width: 120px;
max-height: 200px;
overflow-y: auto;
display: block;
}
.operate-cols-list label {
width: 100%;
text-align: left;
white-space: nowrap;
display: block;
padding: 5px 0;
line-height: 15px;
}
.operate-sel-all {
display: block;
text-align: center;
color: #da3c7f;
}
.operate-top {
display: block;
padding: 10px 0;
}
</style>
<script>
$(function () {
$(".operate-cols").each(function (opIndex, opItem) {
var key = 'operate_cols_' + opIndex + location.pathname;
key = key.replace(/\/\d+$/, '');
var id = $(opItem).data('id');
var oldHtml = $(opItem).html();
var th_list = $("#" + id).find("th");
var list = [];
var html = "<span class='operate-cols-container'>";
html += "<span class='operate-top'><span style='font-weight: 700;'>字段选择</span><span class='operate-cancel-all' style='float:right;'>全部取消</span></span>";
html += "<span class='operate-cols-list'>";
th_list.each(function (index, item) {
var i = {
index: index,
item: $.trim($(item).text()),
hide: $(item).is(':hidden')
};
list.push(i);
html += "<label><input type='checkbox' value='" + i.index + "' " + (i.hide ? '' : 'checked') + ">" + i.item + "</label>";
});
html += "</span>";
html += "<span class='operate-top'><span class='operate-sel-all'>全部选择</span></span>";
html += "</span>";
$(opItem).html(oldHtml + html);
var list_column = {};
for (var i in list) {
list_column[list[i]['index']] = list[i]['item']
}
//选择显示隐藏
$(opItem).find(".operate-cols-list input[type='checkbox']").change(function () {
var ind = $(this).val();
var checked = $(this).prop('checked');
var table = $("#" + id).parent();
var num = parseInt(ind.toString()) + 1;
table.each(function (index, tr) {
if (checked) {
$(tr).find("td:nth-child(" + num + ")").show();
$(tr).find("th:nth-child(" + num + ")").show();
} else {
$(tr).find("td:nth-child(" + num + ")").hide();
$(tr).find("th:nth-child(" + num + ")").hide();
}
});
var box_list = $(opItem).find(".operate-cols-list input[type='checkbox']");
var item_list = {};
box_list.each(function (index2, item2) {
item_list[index2 + '_' + list_column[index2]] = $(item2).prop('checked')
});
window.localStorage && window.localStorage.setItem(key, JSON.stringify(item_list))
});
//读取本地配置
var storage = window.localStorage && window.localStorage.getItem(key) || null;
if (storage) {
var storage_arr = JSON.parse(storage);
$(opItem).find('input').each(function (oIndex, oItem) {
var oItemChecked = $(oItem).prop('checked');
if (storage_arr.hasOwnProperty(oIndex + '_' + list_column[oIndex]) && storage_arr[oIndex + '_' + list_column[oIndex]] !== oItemChecked) {
$(oItem).click()
}
});
}
});
$(".operate-cols").click(function (e) {
var list = $(this).find(".operate-cols-container");
if (list.is(":hidden")) {
$(this).find(".operate-cols-container").show();
e.stopPropagation();
}
});
$(".operate-cols-container").click(function (e) {
e.stopPropagation();
});
$(".operate-sel-all").click(function () {
var that = $(this).parent().parent().find('.operate-cols-list input');
that.each(function (allIndex, allItem) {
var allItemChecked = $(allItem).prop('checked');
if (allItemChecked === false) {
$(allItem).click()
}
});
});
$(".operate-cancel-all").click(function () {
var that = $(this).parent().parent().find('.operate-cols-list input');
that.each(function (allIndex, allItem) {
var allItemChecked = $(allItem).prop('checked');
if (allItemChecked === true) {
$(allItem).click()
}
});
});
$(document.body).click(function () {
$(this).find(".operate-cols-container").hide();
});
})
</script>