jQuery plugin to manipulate tables in an ASP.NET website

dshrenik
dshrenik used Ask the Experts™
on
There seem to be a lot of jQuery plugins, and I'm not able to decide which one's best for me since most of them do not have a demo.

I must be able to choose the controls to be placed in a particular cell (Text box / Drop down menu )

User's requirements:
Create new table (User must be able to add multiple tables to the page, without reloading)
Delete table
Add new row / column to a table
Delete row / column from a table

Column resizing will be great (but not a must)
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
@dshrenik: why do you need a plugin, when simple jquery dom manipulation can do the same for you?
http://api.jquery.com/category/manipulation/
http://api.jquery.com/category/attributes/
http://api.jquery.com/category/css/

however there is a table manipulation plugin available
http://plugins.jquery.com/project/table

Author

Commented:
Thanks for the links!

I am new to jQuery. If possible, can you give me some sample code that will do some of these operations:
Create new table
Add new row/column
Delete row/column
Resizing of row/column
i have implemented about first 2, please check

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<style>
		#container
		{
			position:absolute;
			top:100;
			left:1;
			height:200px;
			width:800px;
			overflow:scroll;
		}
		#table1 td
		{
			border-width:1;
			border-style:solid;
		}
	</style>
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
	<script type="text/javascript"> 

		var rowCounter = 0;
		var table = "<table id='table1'><tr class='header'><td>Sr.</td><td>Name</td><td class='action'>+</td></tr></table>"
		function createTable()
		{
			$("#container").append(table);

			$("tr.header td.action").bind("click", function(){
				addRow();

				$("tr.nonHeader td.action").bind("click", function(){
					$(this).parent().remove();
				});
			});

		}
		function deleteTable()
		{
			$("#container").html("");
		}

		function addRow()
		{
			rowCounter = rowCounter + 1;
			$("#table1").append( getRow() );
		}

		function getRow()
		{
			var row = "<tr id='row"+rowCounter+"' class='nonHeader'><td>"+rowCounter+"</td><td>Row number "+rowCounter+"</td><td class='action'>-</td></tr>";
			
			return row;
		}

	</script> 


</HEAD>

<BODY>
	<div id="links">
		<a href="javascript:createTable()">Create a table</a> <br/>
		<a href="javascript:deleteTable()">delete a table</a> <br/>
	</div>
	<div id="container">
		
	</div>
</BODY>
</HTML>

Open in new window

Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

In the above page, you can click on plus to add a row and minus to delete that row

Similarly you can also add/remove columns

you can use jquery UI for doing resizable
http://jqueryui.com/demos/resizable/
http://viralpatel.net/blogs/2010/01/jquery-resizable-draggable-resize-drag-tutorial-example.html

Author

Commented:
Great! Thanks for your time.

I want to add this to an ASP.NET C# website (Visual Studio 2010)
I placed the code within the "HeadContent" Placeholder. Though it is working, the placement is bad. Is it possible to use absolute/relative positioning to place them in an organized manner?
Can I get the hyperlink icon when I hover over  + or -
'Delete table' seems to delete all table. Can we have the link to delete the table below a particular table?
Is it possible to drag/drop an entire row/column so that I can rearrange them inside the table?
How can I add controls (textbox/dropdown menu) to a particular cell in a table. I also need to give them IDs so that the data is sent to the server on postback.
You can find jquery table plugins with description here.
http://www.webdesignbooth.com/15-great-jquery-plugins-for-better-table-manipulation/

I personally like flexigrid www.flexigrid.info where the table is resizable, and also columns are draggable. You can also hide and show particular column.

This doesnt give any api to add/remove rows on run time, but you can always manipulate dom tree it creates on run time and do your stuff.

--rafi
<<Is it possible to use absolute/relative positioning to place them in an organized manner?>>
Yes, please check my code, i have positioned it absolute.

<<Can I get the hyperlink icon when I hover over  + or ->>
Yes, why not? all you need to do is, capture the hover event of plus/minus (rather than click) and then replace it with icon image before setting the click event on that icon image

<<'Delete table' seems to delete all table. Can we have the link to delete the table below a particular table?>>
Yes, all you need to do is remember the id of the table you want to remove, then $("#nextTableId").remove();

<<Is it possible to drag/drop an entire row/column so that I can rearrange them inside the table?>>
Please check my post number #33955099, for the jqueryUI's drag drop and resize

<<How can I add controls (textbox/dropdown menu) to a particular cell in a table. I also need to give them IDs so that the data is sent to the server on postback.>>
Using the append method, as i have used for creating a table and a row. please check my code for that

Author

Commented:
Great! Thanks for the help!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial