View Full Version : How to merge table cells

10-17-2005, 03:35 PM

I want to know if there are an examples out there on how to merge tables cells visually.

I have written code to capture a dblclick on a table cell to select it.

function tblEvent()
var editor = document.getElementById("Editor");
var cells = editor.getElementsByTagName("td");

for(var i=0;i<cells.length;i++)
cells[i].ondblclick = selectCell(cell[i]);

The selectCell function just stores the cell number in a hidden field and sets the style to a highlight color.

How would I get reliable cell merging. I have had a crack at it and it is very buggy.

10-17-2005, 06:55 PM
Use the colSpan td property to merge the cells in the table.
Check the example at the colSpan property (http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/colspan.asp).

10-17-2005, 07:24 PM
I know how to write HTML and can colspan or rowspan anything under the sun but what I want is a dynamic way to select a table cell (ie in a rich text editor) and then click a merge cells button and have my code d the work. Like in MS Word. You just select the cells you want and click MERGE!

10-17-2005, 07:37 PM
are you using execCommand to create your html?

10-17-2005, 07:41 PM
I guess I have not been very clear on what I am doing.

I am writing a CMS and am using a rich text editor to allow the user to visually create tables and format text.

I have a button that inserts a table to the users specifications. What I want now is to let the user select cells of that table and then click merge and have the program do it for them.

I am not he user of this product. It will be people that do not know HTML, and do not want to. I need a visual way to merge cells.

10-17-2005, 07:44 PM
are you using execCommand to create your html?

again, we need to know the background of your RTE (WYSIWYG) editor to help.

the problem you are having is independant of the application you are using the editor in. The editor is where the stem of the problem must be.
now i use the term problem loosly, what i really mean is 'lack in functionality' as this is not a bug, but a feature you are having trouble fabricating.

so, let me ask once more, how does your editor create this html to begin with?

10-17-2005, 07:52 PM
It is a <DIV> with contentEditable="true". I made the RTE, it is not a 3rd party product.

When the user clicks add table button they are asked some options and then javascript generates the table and inserts it into the <DIV>.

As listed in my original post is the function i use to determine which table cell is double clicked. When a cell is double clicked the javascript changes that cells className to "selected" chich in turn uses CSS to change the background color of the cell, simulating selection, the cell number is then stored in a hidden field.

Now I need to add the merging functionality. This brings me to the present problem at hand.

This is the function I use to insert the code into the RTE.

function insertString(val)
sel = document.selection.createRange();

10-17-2005, 08:21 PM
sorry, i'm not firmiliar with that method. personally i use an iframe with designmode = true.

10-17-2005, 09:47 PM
If I understood you correctly, you should do this:

1. append the content of adjacent cell (nextSibling) to first selected cell in row
2. remove the instance of adjacent cell
3. raise the colspan value of first cell by one.