您的位置：首页 > Web前端 > JavaScript

js实现table用鼠标改变td的宽度，固定table宽度和高度超过显示点

2014-11-14 14:25 1666 查看 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk">
<title>table</title>
<style>
.ztable {
table-layout: fixed;
font-size: 12px;
font-family: 微软雅黑;
border-right: 1px solid #D4D4D4;
border-bottom: 1px solid #D4D4D4;
}

.ztable th {
background-color: #F0F0F0;
height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
border-left: 1px solid #D4D4D4;
border-top: 1px solid #D4D4D4;
}

.ztable td {
border-left: 1px solid #D4D4D4;
border-top: 1px solid #D4D4D4;
height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<table id="tb_1" cellspacing="0" cellpadding="0" width="600" class="ztable">
<tbody>
<tr align="center">
<th style="width: 100px;">用户编号</th>
<th style="width: 100px;">试用时间</th>
<th style="width: 100px;">转正时间</th>
<th style="width: 100px;">性别</th>
<th>姓名拼音</th>
<th>生日时间</th>
<th>民族</th>
<th>身高</th>
</tr>
<tr>
<td>2000001</td>
<td>1997-3-13</td>
<td>1997-3-13</td>
<td>1</td>
<td>WZJ</td>
<td>1965-3-13</td>
<td>汉</td>
<td>171</td>
</tr>
<tr>
<td>2000045</td>
<td>2001-2-15</td>
<td>2001-3-15</td>
<td>0</td>
<td>WY</td>
<td>1978-8-5</td>
<td>汉</td>
<td>162</td>
</tr>
<tr>
<td>2000046</td>
<td>2001-2-23</td>
<td>2001-3-23</td>
<td>0</td>
<td>LQ</td>
<td>2001-2-23</td>
<td>汉</td>
<td>171</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
var table = document.getElementById("tb_1");
for (j = 0; j < table.rows[0].cells.length; j++) {
table.rows[0].cells[j].onmousedown = function () {
//记录单元格
tTD = this;
if (event.offsetX > tTD.offsetWidth - 10) {
tTD.mouseDown = true;
tTD.oldX = event.x;
tTD.oldWidth = tTD.offsetWidth;
}
//记录Table宽度
//table = tTD; while (table.tagName != ‘TABLE') table = table.parentElement;
//tTD.tableWidth = table.offsetWidth;
};
table.rows[0].cells[j].onmouseup = function () {
//结束宽度调整
if (tTD == undefined) tTD = this;
tTD.mouseDown = false;
tTD.style.cursor = 'default';
};
table.rows[0].cells[j].onmousemove = function () {
//更改鼠标样式
if (event.offsetX > this.offsetWidth - 10)
this.style.cursor = 'col-resize';
else
this.style.cursor = 'default';
//取出暂存的Table Cell
if (tTD == undefined) tTD = this;
//调整宽度
if (tTD.mouseDown != null && tTD.mouseDown == true) {
tTD.style.cursor = 'default';
if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
//调整列宽
tTD.style.width = tTD.width;
tTD.style.cursor = 'col-resize';
//调整该列中的每个Cell
table = tTD; while (table.tagName != 'TABLE') table = table.parentElement;
for (j = 0; j < table.rows.length; j++) {
table.rows[j].cells[tTD.cellIndex].width = tTD.width;
}
//调整整个表
//table.width = tTD.tableWidth + (tTD.offsetWidth – tTD.oldWidth);
//table.style.width = table.width;
}
};
}
</script>
</body>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航