本文为大家详细介绍下通过JS实现可改变列宽的table
具体的思路及代码如下
感兴趣的朋友可以参考下哈
希望对大家有所帮助
复制代码 代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk">
<title>table</title>
</head>
<body>
<table id="tb_" cellspacing="" cellpadding="" width="%" border="">
<tbody>
<tr align="center" bgcolor="#dcdcdc">
<td style="width:px;">用户编号</td>
<td>试用时间</td><td>转正时间</td><td>性别</td><td>姓名拼音</td>
<td>生日时间</td><td>民族</td><td>身高</td>
</tr>
<tr>
<td></td>
<td></td><td></td><td></td><td>WZJ</td>
<td></td><td>汉</td><td></td>
</tr>
<tr>
<td></td>
<td></td><td></td><td></td><td>WY</td>
<td></td><td>汉</td><td></td>
</tr>
<tr>
<td></td>
<td></td><td></td><td></td><td>LQ</td>
<td></td><td>汉</td><td></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var tTD; //用来存储当前更改宽度的Table Cell避免快速移动鼠标的问题
var table = documentgetElementById("tb_");
for (j = ; j < tablerows[]cellslength; j++) {
tablerows[]cells[j]onmousedown = function () {
//记录单元格
tTD = this;
if (eventoffsetX > tTDoffsetWidth ) {
tTDmouseDown = true;
tTDoldX = eventx;
tTDoldWidth = tTDoffsetWidth;
}
//记录Table宽度
//table = tTD; while (tabletagName != ‘TABLE) table = tableparentElement;
//tTDtableWidth = tableoffsetWidth;
};
tablerows[]cells[j]onmouseup = function () {
//结束宽度调整
if (tTD == undefined) tTD = this;
tTDmouseDown = false;
tTDstylecursor = default;
};
tablerows[]cells[j]onmousemove = function () {
//更改鼠标样式
if (eventoffsetX > thisoffsetWidth )
thisstylecursor = colresize;
else
thisstylecursor = default;
//取出暂存的Table Cell
if (tTD == undefined) tTD = this;
//调整宽度
if (tTDmouseDown != null && tTDmouseDown == true) {
tTDstylecursor = default;
if (tTDoldWidth + (eventx tTDoldX)>)
tTDwidth = tTDoldWidth + (eventx tTDoldX);
//调整列宽
tTDstylewidth = tTDwidth;
tTDstylecursor = colresize;
//调整该列中的每个Cell
table = tTD; while (tabletagName != TABLE) table = tableparentElement;
for (j = ; j < tablerowslength; j++) {
tablerows[j]cells[tTDcellIndex]width = tTDwidth;
}
//调整整个表
//tablewidth = tTDtableWidth + (tTDoffsetWidth – tTDoldWidth);
//tablestylewidth = tablewidth;
}
};
}
</script>
</body>
</html>
