JS實現可改變列寬的table實例

本文為大家詳細介紹下通過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>

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20107.html