可拖动调整列宽的table

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

<html xmlns="http://www.w3.org/1999/xhtml">
3

<head>
4

<title>无标题文档</title>
6

<!--
8

* {
9

font-family: Verdana, Arial, Helvetica, sans-serif;
10

font-size: 12px;
11

color: #333333;
12

}
13

-->
14

</style>
15

</head>
16

<body>
18

<div>
19

<table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;border-collapse:collapse;">
20

<colgroup>
21

<col style="width:200px;" />
22

<col style="width:100px;" />
23

<col style="width:100px;" />
24

<col style="width:100px;" />
25

<col style="width:100px;" />
26

</colgroup>
27

<tr>
28

<td>拖动我1</td>
29

<td>拖动我2</td>
30

<td>拖动我3</td>
31

<td>拖动我4</td>
32

<td>拖动我5</td>
33

</tr>
34

<tr>
35

<td> </td>
36

<td> </td>
37

<td> </td>
38

<td> </td>
39

<td> </td>
40

</tr>
41

<tr>
42

<td> </td>
43

<td> </td>
44

<td> </td>
45

<td> </td>
46

<td> </td>
47

</tr>
48

<tr>
49

<td> </td>
50

<td> </td>
51

<td> </td>
52

<td> </td>
53

<td> </td>
54

</tr>
55

<tr>
56

<td> </td>
57

<td> </td>
58

<td> </td>
59

<td> </td>
60

<td> </td>
61

</tr>
62

<tr>
63

<td> </td>
64

<td> </td>
65

<td> </td>
66

<td> </td>
67

<td> </td>
68

</tr>
69

</table>
70

</div>
71

var JPos = {};
73

(function($){
74

$.getAbsPos = function(pTarget){
76

var x_ = y_ = 0;
77

if(pTarget.style.position != "absolute"){
79

while(pTarget.offsetParent){
80

x_ += pTarget.offsetLeft;
81

y_ += pTarget.offsetTop;
82

pTarget = pTarget.offsetParent;
83

}
84

}
85

x_ += pTarget.offsetLeft;
86

y_ += pTarget.offsetTop;
87

return {x:x_,y:y_};
88

}
89

$.getEventPos = function(evt){
91

var _x,_y;
92

evt = JEvent.getEvent(evt);
93

if(evt.pageX || evt.pageY){
94

_x = evt.pageX;
95

_y = evt.pageY;
96

}else if(evt.clientX || evt.clientY){
97

_x = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - (document.body.clientLeft || document.documentElement.clientLeft);
98

_y = evt.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - (document.body.clientTop || document.documentElement.clientTop);
99

}else{
100

return $.getAbsPos(evt.target);
101

}
102

return {x:_x,y:_y};
103

}
104

105

})(JPos);
106

107

108

//=======================================================================================
109

110

var JEvent = {};
111

(function($){
112

$.getEvent = function(evt){
113

evt = window.event || evt;
114

115

if(!evt){
116

var fun = JEvent.getEvent.caller;
117

while(fun != null){
118

evt = fun.arguments[0];
119

if(evt && evt.constructor == Event)
120

break;
121

fun = fun.caller;
122

}
123

}
124

125

return evt;
126

}
127

128

$.doEvent = function(fun){
129

var args = arguments;
130

return function(){
131

return fun(args);
132

}
133

}
134

})(JEvent);
135

//=======================================================================================
136

137

var colIndex;
138

var dataTable = document.getElementById("dataTable");
139

var cols = dataTable.getElementsByTagName("COL");
140

141

var dragMask = document.createElement("DIV");
142

var mAWidth = mAHeight = 30;
143

document.body.insertBefore(dragMask,document.body.lastChild);
144

dragMask.style.cssText = "width:" + mAWidth + "px;height:" + mAHeight + "px;position:absolute;background-color:#000;filter: Alpha(Opacity=10);-moz-opacity:0.1;opacity: 0.1;display:none;z-index:999999999;display:none;";
145

146

var mask_mousemove = function(evt){
147

if(document.selection){//IE ,Opera
148

if(document.selection.empty)
149

document.selection.empty();//IE
150

else{//Opera
151

document.selection = null;
152

}
153

}else if(window.getSelection){//FF,Safari
154

window.getSelection().removeAllRanges();
155

}
156

157

var oPos = JPos.getAbsPos(this);
158

var mPos = JPos.getEventPos(evt);
159

160

var x = mPos.x - oPos.x - mAWidth / 2;
161

var tmpX = parseInt(cols[colIndex].style.width) + x;
162

dragMask.style.left = mPos.x - mAWidth / 2 + "px";
163

cols[colIndex].style.width = tmpX >= 2 ? tmpX + "px" : "2px";
164

if(!document.all)
165

dataTable.parentNode.style.width = dataTable.parentNode.clientWidth + x + "px";//这一句为处理FF时用。
166

}
167

168

var mask_mouseup = function(evt){
169

dragMask.style.display = "none";
170

}
171

172

dragMask.onmousemove = mask_mousemove;
173

dragMask.onmouseup = mask_mouseup;
174

175

var cell_mousedown = function(evt){
176

colIndex = this.colIndex;
177

var mPos = JPos.getEventPos(evt);
178

with(dragMask.style){
179

left = mPos.x - mAWidth / 2 + "px";
180

top = mPos.y - mAHeight / 2 + "px";
181

display = "";
182

}
183

}
184

185

var chk_click = function(evt){
186

var obj = cols[this.colIndex];
187

if(this.checked){
188

obj.style.cssText = obj.css_ ? obj.css_ : "width:100px;";
189

}else{
190

obj.css_ = obj.style.cssText;
191

obj.style.cssText = document.all ? "display:none" : "visibility: collapse;overflow:hidden;width:0px;";
192

}
193

}
194

195

var i , o;
196

var label ,chk;
197

for(i = 0 ; o = dataTable.rows[0].cells[i] ; i++){
198

o.colIndex = i;
199

o.onmousedown = cell_mousedown;
200

201

label = document.createElement("LABEL");
202

document.body.insertBefore(label,document.body.lastChild);
203

chk = document.createElement("INPUT");
204

chk.type = "checkbox";
205

label.appendChild(chk);
206

chk.onclick = chk_click;
207

chk.colIndex = i;
208

chk.checked = "checked";
209

label.appendChild(document.createTextNode(o.innerHTML));
210

}
211

</script>
212

</body>
213

</html>
214

来源：https://www.cnblogs.com/mijian/archive/2008/06/27/1231376.html

标签

table