Question

I can’t quite wrap my head around this one…

A table like the one below is spit out by a renderer from some XML. The XML it comes from has a variable depth. (Please point out if I’m using the rowspans in a horrific manner as well, I just came to this table with some experimentation).

<table border="1">
    <tr>
        <td rowspan="12">> 1</td>
    </tr>
    <tr>
        <td rowspan="3">1 > 2</td>
    </tr>
    <tr>
        <td>1 > 2 > 5</td>
    </tr>
    <tr>
        <td>1 > 2 > 6</td>
    </tr>
    <tr>
        <td rowspan="3">1 > 3</td>
    </tr>
    <tr>
        <td>1 > 3 > 7</td>
    </tr>
    <tr>
        <td>1 > 3 > 8</td>
    </tr>
    <tr>
        <td rowspan="3">1 > 4</td>
    </tr>
    <tr>
        <td>1 > 4 > 9</td>
    </tr>
    <tr>
        <td>1 > 4 > 10</td>
    </tr>
</table>

![alt text][1]

What I’m trying to accomplish in JQuery is this…

1. User clicks cell “1 > 2” (which will have an ID).
2. An item is dynamically added to the third level, but UNDER “1 > 2 > 6”.

What I could do is just add another row underneath “1 > 2” and increase the rowspan from “1 > 2”, but the new cell would then appear out of order amongst “1 > 2 > 5” and “1 > 2 > 6”.

I don’t really need the exact code to do this, just something to stop my head from spinning around this…Thanks!

Answer 1

It seems your rowspans are a little strange, the first row of the table makes sense to have 3 cells in it, the first rowspan of 6, the second a rowspan of 2, and finally the “single cell”…

Sadly, <tr>‘s and <td>‘s are unreliable when dealing with colspan/rowspan issues across browsers. SO1303106 shows a solution that builds up a matrix of each row/column and creates some functions to help you query it. This article inspired that solution, and shows the problem.

Using the getTableState() function from that other article. you could do something like this:

$("table").click(function(e) {
  var targ = $(e.target);
  var c = targ.closest('td').get(0);
  if (!c) return;
  var state = getTableState($(this).closest('table')[0]);
  var rowSpan = c.rowSpan || 1;
  // get the "bottom row" number from our clicked cell:
  var rowNum = $(c).closest('tr').get(0).rowIndex + (rowSpan - 1);
  var column = state.getRealColFromElement(c);
  // push all rowspans on the clicked td and anything to the left
  for (;column>=0; column--) {
    var cell = state.cellMatrix[rowNum][column].cell;
    cell.rowSpan = (cell.rowSpan||1)+1;
  }
  // insert a new row after the "bottom row"
  $(this).closest('table').find('tr').eq(rowNum).after(
     '<tr><td>'+$(c).text() + ' > new</td></tr>'
  );
});

And just to put it all together a jsbin preview of the finished product…