jQueryUi table resize problem
my code already works but it i still need some help.my aim is to drag the red div and resize all affected rows. first row works, but all rows under the first one were ignored. does anybody have a hint ?
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<style type="text/css">
.grid{
border:1px solid #000;
overflow:auto;
width:400px;
margin:50px;
}
.grid .head{
height:21px;
width:100%;
overflow:hidden;
}
.grid .head div.th{
overflow:hidden;
padding:0 0 0 15px;
width:75px;
border-right:1px solid;
border-bottom:1px solid;
}
.grid .head th div.ui-resizable-e{
background:red;
cursor:e-resize;
overflow:hidden;
width:5px;
height:20px;
float:right;
*margin-top:-19px;
}
.grid .content td div{
border-right:1px solid;
overflow:hidden;
width:90px;
white-space:nowrap;
}
</style>
<script>
$(function(){
col = $('.grid .head thead tr').children().prevAll().length;
for(c=0;c<=col;c++){
$('.grid .th:eq(' + c + ')')
.resizable({minWidth:75, handles:'e', alsoResize:'.grid .content td:eq(' + c + ') div'});
}
});
</script>
</head>
<body>
<div class="grid">
<div class="head">
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>
<div class="th ui-widget-header">
<span>name</span>
</div>
</th>
<th><div class="th ui-widget-header"><span>street</span></div></th>
<th><div class="th ui-widget-header"><span>city</span></div></th>
</tr>
</thead>
</table>
</div>
<div class="content">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><div>1</div></td>
<td><div>Lorem ipsum dolor sit amet, consetetur sadipscing </div></td>
<td><div>3</div></td>
</tr>
<tr>
<td><div>1</div></td>
<td><div>Lorem ipsum dolor sit amet, </div></td>
<td><div>3</div></td>
</tr>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
</tr>
<tr>
<td><div>1</div></td>
<td><div>Lorem ipsum</div></td>
<td><div>3</div></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>