asked on

how to make a table column adjustable using jquery using the mouse?

how to make a table columns adjustable using the mouse with jquery technology?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
	$('input[type=checkbox]').bind('click',function(){
		if( this.checked)
		{
			var row=$(this).closest('tr');
			alert( row.attr('id') );
			
			alert( $('td:eq(1)', row).html() )//second cell
			alert( $('td:eq(2)', row).html() )//third cell
		}
	});	
});
</script>
</head>
<body>
<table id="theTable" border='1'>
	<tr id='rowa'><td><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr> 
	<tr id='rowb'><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
</table>
</body>
</html>

Open in new window

leakim971

Check this plugin : http://www.ita.es/jquery/jquery.grid.columnSizing.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery-1.1.3.1.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.dimensions.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.cookies.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.iutil.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.idrag.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.grid.columnSizing.js"></script>
<script type="text/javascript">
$(function(){
	$("table").columnSizing()
	$('input[type=checkbox]').bind('click',function(){
		if( this.checked)
		{
			var row=$(this).closest('tr');
			alert( row.attr('id') );
			
			alert( $('td:eq(1)', row).html() )//second cell
			alert( $('td:eq(2)', row).html() )//third cell
		}
	});	
});
</script>
</head>
<body>
<table id="theTable" border='1'>
	<tr id='rowa'><td><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr> 
	<tr id='rowb'><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>d</td></tr>
</table>
</body>
</html>

Open in new window

leakim971-449390.flv

areyouready344

ASKER

Thanks leakim but the checkbox events stop working

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

areyouready344

ASKER

thanks again leakim, all is working.

leakim971

You're welcome! Thanks for the points!