可以监听下拉选,然后获取到不同值之后使用jquery让对应得table show 或者hiden
样式代码
<style type="text/css">
#selectBoard{
width: 100px;
height: 20px;
text-align: center;
}
#selectBoard ul{
width: 100px;
background: white;
position: absolute;
text-align: center;
top: -10px;
left: -10px;
border-radius: 5px;
display: none;
}
#selectBoard ul li{
text-align: center;
list-style: none;
}
#selectBoard ul li:hover{background: dodgerblue;}
#selectBoard img{
position: absolute;
right: 0;
top: 0;
width: 30px;
}
<li>
<a class="icon" id="selectBoard">
<ul style="display: none">
<li><input type="checkbox" value=0 name="displayField"/>编号</li>
<li><input type="checkbox" value=1 name="displayField" checked="true"/>名称</li>
<li><input type="checkbox" value=2 name="displayField" checked="true"/>描述</li>
<li><input type="checkbox" value=3 name="displayField" checked="true"/>创建时间</li>
<li><input type="checkbox" value=4 name="displayField" checked="true"/>更新时间</li>
<li><input type="checkbox" value=5 name="displayField" checked="true"/>创建者</li>
<li><input type="checkbox" value=6 name="displayField" checked="true"/>修改者</li>
</ul>
<span>
字段显示或隐藏
</span>
</a>
</li>
</style>
js代码
<script type="text/javascript">
$("#selectBoard").click(function(event){
let boardHeight = $("#selectBoard").prop('scrollHeight');
let boardWidth = $("#selectBoard").prop('scrollWidth');
console.log(boardHeight, "==", boardWidth);
var ev = event || window.event;
//阻止默认事件及封装
if (ev.stopPropagation) {
ev.stopPropagation();
}else{
ev.cancelable = true;
}
$("#selectBoard ul").css("display","block");
});
$(window).click(function(){
$("#selectBoard ul").css("display","none");
});
$(document).ready(function () {
$("#tab1 tr").find("th:eq(0)").hide();
$("#tab1 tr").find("td:eq(0)").hide();
$("input[name='displayField']").change(function (){
if ($(this).prop("checked")) {
let val = $(this).val();
$("#tab1 tr").find("th:eq("+val+")").show(0);
$("#tab1 tr").find("td:eq("+val+")").show(0);
}else {
let val = $(this).val();
let strth = "th:eq("+val+")";
let strtd = "td:eq("+val+")";
$("#tab1 tr").find(strth).hide(0);
$("#tab1 tr").find(strtd).hide(0);
}
})
})
</script>