Like in this demo

.aspx

Except In this demo it's being added as an additional row. (click one of the ">" things and check the page source, it added a new row to the table). If I used this strategy, It would be difficult to sort, using a standard Jquery plugin, like table sorter.

Ideas?

Like in this demo

http://demos.telerik./aspnet-ajax/grid/examples/hierarchy/nestedviewtemplate/defaultcs.aspx

Except In this demo it's being added as an additional row. (click one of the ">" things and check the page source, it added a new row to the table). If I used this strategy, It would be difficult to sort, using a standard Jquery plugin, like table sorter.

Ideas?

• javascript
• jquery
• html
• jquery-ui

• Am I being clear about what I'm trying to do? I have a DIV, like that whole blue area, that I want to show, like they do in the demo, when a row is expanded, so it appears "inside" of the expanded row, like it does in the demo, without having to add another row to the table. – kralco626 Commented May 18, 2011 at 16:55
• your being semi-clear, assume you want to "split" a table by adding a div (or block of some sort that's not a table row) in between rows, if that's not right then no you're not being clear ;) if that's right then the answer is you have to it with , or inside, another row (use colspan and stretch the new div table the full width) or break the table - as patrick dw says in his answer only a tr can be a child of a table – clairesuzy Commented May 18, 2011 at 17:06
• @claire - unfortunately, you have it right. I'm looking for any solution that does not involve another <tr> tag being added to the table. – kralco626 Commented May 18, 2011 at 17:10
• 1 ( than my vote stays with @patricks answer.. even if you could position a div over the table (under the right row) somehow, you would still need to expand the row's height to make room for the div, so the following rows would still be visible as if they'd moved down.. calculating the height of the row to match the div content might work, but table row heights are dodgy too even if the positioning can be figured out.. maybe possible with offset to find the position and expanding the row height – clairesuzy Commented May 18, 2011 at 17:17

9 Answers 9

went away and did some thinking about my ment, about finding row height and overlaying the div.. it's so close, but I'm no jQuery whiz, so perhaps someone can help tidy this up

I have it showing/hiding the div in the right position IF the div/row is closed before the next one is opened.. but if you click button 2 while div one is opened is doesn't get the right top position (it gets the position the row was at after being expanded not the original row position), I'm sure there must be a way to get that position while the rows are not expanded and store it??

anyway have at it.. I know it's very long-winded, variable wise, because I can only apply the CSS logic - I don't know enough about js or jquery functions and storing.. also I thought if I explained how I got to my variables and which ones were needed it might help those who do know how to make this better ;)

• the input/buttons have no text but they're the click trigger

• position() is maybe not the right thing to use, it needs for the div to be able to find the original position of the related row (inside table-wrap div?)

• ?

here's the Example

You can't. A <div> is not a valid child of <table> or <tbody>. You'll need to use a <tr>.

I don't know how that plugin works, but perhaps there's support for sorting multiple <tbody> elements, which would allow you to group your sets of rows.

That div is inside a td which is hidden until you click the >

Here is a demo: http://jsfiddle/maniator/7RLhL/1/

I don't know if you can do that. Putting a tag like inside a table isn't valid (X)HTML, and so probably won't give you the effect you were looking for

If you look at that demo, they're using a second <tr> below the first one with a <td> that spans most of the columns.

You can embed a detail table inside a table cell under each description cell which will be not visible and make it visible on tr click: http://jsfiddle/bouillard/QmK4Z/

As mentioned in other answers, we cannot add a div inside the table without it being in a TD. However, there might be something that can be done to place the div over the row. To have the effect of the div being shown as inside the row, we could increase the height of the row while the div is being shown. Here is the very basic demo. Since the div is not really inside the table, if the table happens to sort, you would probably want to hide the div or relocate it to the new TR location. It would present its own challenges but you could play with it and see if it works for you.

I have an idea. It's really ugly. The only think I could think of doing is before sorting the rows, detach the additional rows(with the div) and use JQuery to store it somehow. Then after the sorting is done reattach the rows(with the div) in the right place(s).

That could, no I should say WILL, get ugly really fast, especially with paging and filtering...

You can use getBoundingClientRect to get the element's position and then set those values to a div css position left and top. Must also take into account the window scroll as getBoundingClientRect will return it relative to the window viewport.

The following example will locate a div named #tooltip under any tr row when hovering over it. I'm using jQuery for convenience but you can translate to vanilla JS easily.

<script>
$("tr").hover(
  function () {
    const row = this;
    const bounds = row.getBoundingClientRect();
    tooltip.css({
      left: bounds.left + window.scrollX,
      top: bounds.bottom + window.scrollY
    });
  },
  function () {}
);
</script>

<table> ... </table>
<div id="#tooltip"> ... </div>

Be sure to make div positioning absolute and also to skip pointer events or the div will block hover events from reaching the table elements.

<style>
  #tooltip {
    position: absolute;
    pointer-events: none;
  }
</style>

Good luck!