How do I merge two cells in an html table using javascript and dhtml/html?

Web Languages/Standards Question

How do I merge two cells in an html table using javascript and dhtml/html?

Asked by: bolenka12-01-2009

Solved by: HainKurt

Hi all:
I have a client that has a table grid that we need to allow the user to create custom headers for. Long story short:

The table will have five <tr> table rows (that make up the header) that the user can select any cell within the row and merge the cell with the adjacent (top or bottom). The cells they want to be merged will be highlighted with CSS.

I need this all done on the client. So, for example, I need to dynamically change the colspan or row span of two cells next two each other. There can be two or more cells that can be merged together.

The user will select the cells that they want to merge together all at one time. Then there is a button that says "Merge". When the user clicks this "Merge Button", the new table with merged cells will appear at which point they will be able to add editable text to make headers for its respective grid (kind of like a report header and report...but with customizable headers).

Does anyone have javascript code samples for me. I know what needs to be done, but not quite sure HOW to do it yet. Please help and provide examples. This is sort of urgent.
Thanks.

+ Expand to see the entire question

 

Verified Solution500GOOD

HainKurt2009-12-01 at 18:58:53ID: 25948812

that function will work on every click, when you click a cell, you will select that cell and unselect others if they dont form a line...

Jump to view entire expert comment thread

Get verified answers to millions of technology questions like this one

Try It Free

30 Day free trial.

Trusted by Thousands of Top Companies

• CVS
• BlueCross
• Raytheon
• US Army
• Cox
• TomTom
• FootLocker

View All Expert Comments in Order:

 

Expert Comment

HainKurt2009-12-01 at 13:32:27ID: 25946885

looks like too much work :)

start reading from here : http://www./merge-table-cells-using-javascript.html

 

Expert Comment

HainKurt2009-12-01 at 13:34:32ID: 25946914

another sample here

http:///topic/javascript/answers/537841-cell-merging-script

 

Author Comment

bolenka2009-12-01 at 13:39:39ID: 25946965

wow! you are fast, and yes, this is too much work:) I will check it out. Please feel free to keep posting examples if you come across any. The more the better. Thank you thank you thank you!

 

Expert Comment

HainKurt2009-12-01 at 14:04:16ID: 25947236

here is right click select algorithm

on each cell right click, you select the cell (change the bgcolor = yellow, add attribute old_bgcolor = existing color if any), add attribute selected=1 to the cell (<td> element), but before selecting this cell, check other selected, if all others are adjajent to this one do nothing, ow, deselect all others (set selected=0 bgcolor= old_bgcolor)

merge algorithm

find all text in selected cells, add innerHTML's, assign it to the first cell innerHTML, delete all other cells, set colspan or rowspan = selected cell count

too much work...

on each cell(=TD, add onClick="selectCell(this);")

function selectCell(cell){
  selectCell(cell);
  chkSelectedCells(cell); // this one will unselect previous ones if they are not in line with cell, but will keep cell selected
}

function  selectCell(cell){
  cell.old_bgcolor=cell.bgcolor;
  cell.bgcolor="yellow";
  cell.selected = "1";
};

function unselectCell(cell){
  cell.bgcolor=cell.old_bgcolor;
  cell.selected = "0";
}

function isSelected(cell){return cell.selected = "1";}

function mergeCells(){
  for (x=0 to rows.count)  for (y=0 to cols.count) {
  cell = table(x,y);
  if isCelected(cell) txt=txt + cell.innerHTML;
  selCount ++;
  }

  starCell = firs cell on top or on left;
  startCell.innerHTML = txt;
  startCell.rowspan | colspan = selCount;

  deleteAllCells(startCell); //remove all selected but startCell
  unselectCell(startCell);
}

here some pseudo codes :) let me know if you finish it all :) good luck...

 

Author Comment

bolenka2009-12-01 at 15:43:19ID: 25947969

wow thank you. let me go over it an I will get back to you with questions if that is ok. Do you have one that isnt right clicking? Just a regular click?

 

Author Comment

bolenka2009-12-01 at 15:56:26ID: 25948062

is the second function name supposed to be different than the first? It seems you have two selectCell  functions?

Also, for the mergeCells script...do you know what the correct syntax would be for the for loops? I am not sure what that would be for x and y in javascript.

Thanks so much. you are really helping me so much.

 

Expert Comment

HainKurt2009-12-01 at 15:59:12ID: 25948078

o yea, the first one should be different :)

<td onClick="clickCell(this);">

function clickCell(cell){
  selectCell(cell);
  chkSelectedCells(cell); // this one will unselect previous ones if they are not in line with cell, but will keep cell selected
}

... the rest is same :)

 

Author Comment

bolenka2009-12-01 at 16:15:59ID: 25948153

also, what is chkselectedcell? I don't see a function for that..thanks.

 

Expert Comment

HainKurt2009-12-01 at 16:16:40ID: 25948156

here how to loop

<table id=myTable>
<tr><td>1A</td><td>1B</td><td>1C</td></tr>
<tr><td>2A</td><td>2B</td><td>2C</td></tr>
</table>

<script>
var tbl = document.getElementById("myTable");
var rows = tbl.getElementsByTagName("tr");
for (var i=0; i< rows.length; i++){
    var cells = rows[i].getElementsByTagName("td");
    for (var j=0; j<cells.length; j++) {
    alert(cells[j].innerHTML);
    }
}
</script>

 

Expert Comment

HainKurt2009-12-01 at 16:18:37ID: 25948161

chkselectedcell() is a homework function for you :)

when you click a cell, you will first call this function, to check the existing selected ones + new cell makes a line or not? if they dont make a line (all selected cells rownumber or colnumber should be same to make them a line), it will de-select existing ones, but leave the new cell selected :)

 

Author Comment

bolenka2009-12-01 at 16:57:57ID: 25948323

ok, thanks for the clarification...and the homework:) I will try to figure it out.

 

Author Comment

bolenka2009-12-01 at 17:01:57ID: 25948339

also, will the chkselectedcell function work for rowspan as well if they want to select a cell and then one above it to merge?
thanks.

 

Verified Solution500GOOD

HainKurt2009-12-01 at 18:58:53ID: 25948812

that function will work on every click, when you click a cell, you will select that cell and unselect others if they dont form a line...

 

Author Comment

bolenka2009-12-02 at 05:26:14ID: 25951562

On your text above:

here is right click select algorithm

on each cell right click, you select the cell (change the bgcolor = yellow, add attribute old_bgcolor = existing color if any), add attribute selected=1 to the cell (<td> element), but before selecting this cell, check other selected, if all others are adjajent to this one do nothing, ow, deselect all others (set selected=0 bgcolor= old_bgcolor)

when you say "add an attribute" I am not sure what that means. How do you add an attribute to a cell in javascript? I see in your pseudocode:
function  selectCell(cell){
  cell.old_bgcolor=cell.bgcolor;
  cell.bgcolor="yellow";
  cell.selected = "1";
};

that cell.old_bgcolor = cell.bgcolor;
I didnt know you could do that in javascript. Is that the code for changing the bgcolor, or is it pseudocode? Sorry for confusion. I am still learning some things. thanks again. Not sure what you mean by adding an attribute...or even what cell.selected ="1" does...or where that is saved.

 

Expert Comment

HainKurt2009-12-02 at 07:21:24ID: 25952690

you can use this

cell.old_bgcolor = cell.bgcolor;

it will add an attribute to td, named old_bgcolor and it will hold the value

it is not a pseudo code :)

same as cell.selected = "1"

it will add a n attribute (at run time) to the cell so you can check later...

 

Author Comment

bolenka2009-12-02 at 07:50:48ID: 25952987

ok thanks. working on this.

 

Author Comment

bolenka2009-12-02 at 08:30:24ID: 25953586

so, a few more questions:

1) Do these algorithms only allow the merging of cells by colspan or row span right? Meaning we have to merge on or the other, we cant merge both at the same time, right?  It wouldnt make sense to try to highlight and merge like this right:
|               |   not       |
| yellow   | selected |
________| _______|
|               |               |
|   yellow |  yellow   |
|_______ |_______ |

because we wouldnt know which one to do rowspan on would we? Does that make sense?

Also, I dont need the user to add text until after the cells are merged....any idea on that? Meaning? can I put a hidden div in there somewhere with a text box that adds the html after the merge? If so, do you know how I would go about that?

Almost there...thanks so  much. you are a lifesaver!

 

Author Comment

bolenka2009-12-02 at 08:48:49ID: 25953894

also, I don't know how or what you mean to deleteAllCellsl in javascript. How do you delete a cell in javascript?

 

Expert Comment

HainKurt2009-12-02 at 10:12:26ID: 25954780

if the selected cells (with the one selected last) does not make a line (vertical or horizantal), you should de-select all others but keep the last one as selecetd... you cannot merge the one you posted, it does not make sense... to be able to merge they should be linear, either vertically or horizantally (ie, all rows or columns should be same)

just add another button, which gets enabled when there is only one cell selected... when clicked user enters some text (or edits the innerHTML of selected cell) and assigns that text to selected cell's innerHTML property...

and remove cell is like this

function removeCell(cell){
  cell.parentNode.removeChild(cell);
}

 

Author Comment

bolenka2009-12-02 at 10:22:00ID: 25954867

you are the best! thank you...i'll give it a try.

 

Author Comment

bolenka2009-12-07 at 10:49:13ID: 25991645

one more question:

how do I get the first cell...because the first cell is the one that is my anchor cell? How do I make sure i get the first cell every time.

I guess I reset the first cell when the user clicks the "merge" button, but what is the syntax to set it...not sure when it gets set or how...

this is working so far...just need a little more help. thanks again.

function mergeCells(){
  for (x=0 to rows.count)  for (y=0 to cols.count) {
  cell = table(x,y);
  if isCelected(cell) txt=txt + cell.innerHTML;
  selCount ++;
  }

  starCell = firs cell on top or on left;
  startCell.innerHTML = txt;
  startCell.rowspan | colspan = selCount;

  deleteAllCells(startCell); //remove all selected but startCell
  unselectCell(startCell);
}

 

Author Comment

bolenka2009-12-09 at 17:30:15ID: 26014423

please send clarification on the below function. I am trying to make sense of it to use it, but i dont know what the syntax is you are using....specificallly: cell = table(x,y);

please help I really need to finish this...its urgent.

function mergeCells(){
  for (x=0 to rows.count)  for (y=0 to cols.count) {
  cell = table(x,y);
  if isCelected(cell) txt=txt + cell.innerHTML;
  selCount ++;
  }

  starCell = firs cell on top or on left;
  startCell.innerHTML = txt;
  startCell.rowspan | colspan = selCount;

  deleteAllCells(startCell); //remove all selected but startCell
  unselectCell(startCell);
}

 

Author Closing Comment

bolenka2009-12-14 at 04:29:16ID: 31660676

this was a good solution, but I really had trouble with syntax...and it wasnt quited complete and all my follow up questions werent answered after that first day or so. but, it was helpful. thanks.