How to create a div that apears below a table row

Like in this demo

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

Except In this demo it's being added as an additional row. (开发者_StackOverflow社区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?

went away and did some thinking about my comment, 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.net/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.net/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!