Editing table layouts in jQuery

Question

So I'm building a CMS and for a given page, I want to let the client layout the page (not the site layout, the page layout, i.e. the content; headline, text, imageboxes, more links and such) with the given elements. Since table layouts are easy to understand for a client, I'm going to use that. Spare me the "always use CSS layouts" comments. I usually use CSS, but for this I really think a table layout is the best way to give the clients an easy to use environment.

So, the client should have a "edit layout" button, which takes them to a new page with the layout grid shown and all the content "modules" shown as boxes. They should be able to re-arrange the boxes and sort them inside the table cells at will. This is no problem for me, but I ALSO want the client to be able to edit the layout table itself.

They should be able to add a column, add a row, merge cells (horizontally) and adjust cell widths (not heights).

I've been googling a lot but most table jQuery plugins are about editing table DATA, not the table itself.

Anyoen have a good suggestion on where to start?

Answer 1

Just some short examples to get you started (with reservations to not having tested anything, but at least it would get you started)

You would of course have to have a way for the customer to know which row, cell and column to pick. I leave that to you, but a $('table').click() might work fine.

Copies the last table row and inserts it after the last:

$('#main-table-layout tr:last').after($('#main-table-layout tr:last').clone());

Inserts a new column into the table (creates a td in each of the rows)

$('#main-table-layout tr).each(function(){
  $(this).find('td:last').after($('<td></td>'));
});

Adjusting the cell-width, you do best with css:

$('#the-cell-that-you-want-to-change').css('width','500px');

To adjust the width on all cells:

$('td').css('width','500px');

Or to the 3rd column (3rd cell in each row)

$('tr').each(function(){$(this).find('td:eq(2)').css('width','500px')});

it might be possible to do the previous one as

$('tr').find('td:eq(2)').css('width','500px');

but I am not really sure how jQuery do the selecting there.

But, in the end I think you'll better off to let them use an editor like CKEditor or something similiar. Saves you all the trouble of taking care of that yourself.