I have a table that I want to move to the top of the page via jquery

Question

Hi,

I have a table on near the bottom of the page, which I want to move all the way to the top to hug the top of the browser (ie/ff compatible).

What's the best way to do this?

<div id="mytable"><table id="t1"><tr><td>hello</td></tr></table></div>

Answer 1

Depends on when you want it to be at the top of the page.

Answer 2

The absolute top? Your best bet is to simply apply position: absolute; top: 0; to it.

In jQuery this would be something like so:

$("#mytable").css({'position': 'absolute', 'top': 0});

I haven't tested this, but I don't see why it shouldn't work. If you need it done after some event just use the appropriate jQuery handler to do so.

Also, as others have pointed out if you want this on the top on page load, you simply can apply the said CSS to it and not even use jQuery.

Answer 3

If by move you mean structurally relocate it in the DOM, you could do this:

var mtId = 'mytable'; //the id of the div to move
var mt = $('#' + mtId);
var mtInnerHtml = mt.html();
mt.remove();
$('body').prepend('<div id="' + mtId + '">' + mtInnerHtml + '</div>');
mt = $('#' + mtId);
mt.css({'margin':0, 'padding':0});

Execute this javascript at some point after the mytable div is loaded into the page. It removes the div from the DOM and recreates it as the first element within the body tag and sets the margin and padding to zero.