<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var isdown = false;
var beginx = 0;
var oldwidth = 0;
var parent;
$(document).mouseup(function(evt){
isdown = false;
});
$(".test").mousedown(function(evt){
isdown = true;
beginx = evt.pageX;
parent = evt.srcElement.offsetParent;
oldwidth = parent.clientWidth;
});
$(document).mousemove(function(evt){
if ( isdown )
{
parent.width = oldwidth + evt.pageX - beginx;
}
});
});
</script>
<style>
.test
{
background-color:red;
width:4px;
height:30px;
float:right;
cursor:e-resize;
}
</style>
</head>
<body>
<table border="1" >
<tr>
<th class="resizehead" ><span class="test"> </span>name<span class="test"> </span></th>
<th class="resizehead" ><span class="test"> </span>sex<span class="test"> </span> </th>
<th class="resizehead" ><span class="test"> </span>country<span class="test"> </span></th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>11</td>
<td>21</td>
<td>41</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
<head>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var isdown = false;
var beginx = 0;
var oldwidth = 0;
var parent;
$(document).mouseup(function(evt){
isdown = false;
});
$(".test").mousedown(function(evt){
isdown = true;
beginx = evt.pageX;
parent = evt.srcElement.offsetParent;
oldwidth = parent.clientWidth;
});
$(document).mousemove(function(evt){
if ( isdown )
{
parent.width = oldwidth + evt.pageX - beginx;
}
});
});
</script>
<style>
.test
{
background-color:red;
width:4px;
height:30px;
float:right;
cursor:e-resize;
}
</style>
</head>
<body>
<table border="1" >
<tr>
<th class="resizehead" ><span class="test"> </span>name<span class="test"> </span></th>
<th class="resizehead" ><span class="test"> </span>sex<span class="test"> </span> </th>
<th class="resizehead" ><span class="test"> </span>country<span class="test"> </span></th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>11</td>
<td>21</td>
<td>41</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
2858
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
