场景:table有隐藏列,当启动table的隐藏列时显示横向滚动条而保持之前显示td的宽度不变。

直接上案例代码,以下代码只是测试用,写的并不是很完善。

table重绘js

var Table = function(id,debugFlag){
	this.tableId = id;
	this.debugFlag = debugFlag;
	this.tableObj = $("#" + id);
	this.theadObj = $("#" + id).find("thead");
	this.tbodyObj = $("#" + id).find("tbody");
}
Table.prototype.showTd = function(tdId){
	//得到table的width属性值
	var tableOldWidthAttr = parseInt($("#" + this.tableId).attr("width"));
	//得到td的width属性值
	var tdWidthAttr = parseInt($("#" + tdId).attr("width"));
	if(this.debugFlag){
		console.info("td显示前table的width属性值:" + tableOldWidthAttr);
		console.info("要显示的td的width属性值:" + tdWidthAttr);
	}
	//重新计算table的width属性值
	var tableNewWidthAttr = tableOldWidthAttr + tdWidthAttr;
	//重新设置table的width属性值
	$("#" + this.tableId).attr("width",tableNewWidthAttr + "%");
	//计算th的像素宽度
	//1:获取table的像素宽度
	var tableNewWidth = $("#" + this.tableId).width();
	//2:计算每个百分比td的宽度值 -- 可能会造成误差,在后面进行误差调整。
	var perWidth = Math.round(tableNewWidth / tableNewWidthAttr);
	//显示隐藏的th
	$("#" + tdId).show();
	$("td[column='" + tdId + "']").show();
	//获取显示th的数量
	var showThNum = this.theadObj.find("th").not(":hidden").length;
	if(this.debugFlag){
		console.info("显示的td数量为:" + showThNum);
		console.info("每份的像素值:" + perWidth);
	}
	//thead的th的属性值数组
	var thWidthAttrArr = new Array(showThNum);
	//存储thead的th的像素值数组
	var thWidthArr = new Array(showThNum);
	//th的像素值总和用于计算误差
	var thWidthTotal = 0;
	for (var i = 0;i < showThNum;i ++) {
		thWidthAttrArr[i] = parseInt(this.theadObj.find("th").eq(i).attr("width"));
		thWidthArr[i] = perWidth * thWidthAttrArr[i];
		thWidthTotal += thWidthArr[i];
	}
	var errorNum = tableNewWidth - thWidthTotal;
	var errorNumAbs = Math.abs(errorNum);
	//将误差像素平分到前几列
	for(var i = 0;i < errorNumAbs;i ++){
		if(errorNum > 0){
			console.info("加一");
			console.info(thWidthArr[i]);
			thWidthArr[i] = thWidthArr[i] + 1;
			console.info(thWidthArr[i]);
		}else{
			thWidthArr[i] = thWidthArr[i] - 1;
			console.info("减一");
		}
	}
	//3:将计算得到的th的宽度像素值赋值到th上
	for(var i = 0;i < showThNum;i ++){
		console.info(thWidthArr[i]);
		console.info(this.theadObj.find("th").eq(i).html());
		this.theadObj.find("th").eq(i).width(thWidthArr[i]);
	}
}


html代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border-collapse: collapse;
			}
			th,td{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<input type="button" onclick="showCol('testcol')" value="展示测试列"/>
		<div style="width: 100%;">
			<table width="100%">
				<thead>
					<tr>
						<th width="20%">姓名</th>						
						<th width="10%">年龄</th>
						<th width="20%">地址</th>
						<th width="20%">专业</th>
						<th width="30%" style="display: none">测试列</th>
						<th width="30%">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>张三</td>
						<td>20</td>
						<td>陈家村</td>
						<td>数学系</td>
						<td style="display: none;">测试列</td>
						<td>查看</td>
					</tr>
				</tbody>
			</table>
			<br/>
			<br/>
			<br/>
			<br/>
			<table id="table_list" width="100%">
				<thead>
					<tr>
						<th width="20%" id="xm">姓名</th>						
						<th width="10%" id="age">年龄</th>
						<th width="20%" id="address">地址</th>
						<th width="20%" id="major">专业</th>
						<th width="30%" id="testcol" style="display: none">测试列</th>
						<th width="30%" id="operator" >操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td column="xm">张三</td>
						<td column="age">20</td>
						<td column="address">陈家村</td>
						<td column="major">数学系</td>
						<td column="testcol" style="display: none;">测试列</td>
						<td column="operator">查看</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>
<script type="text/javascript" src="../js/jquery.min.js" ></script>
<script type="text/javascript" src="../js/table.js" ></script>
<script>
	var table = new Table("table_list",true);
	function showCol(id){
		table.showTd(id);
	}
</script>

效果图:





浏览 582 评论 0 赞 0 砸 0 标签: 前端 javascript
评论
还可以再输入500个字

请您注意

·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款