Delete HTML Table and paste it in another portion of the webpage, Is this possible using JQuery?
I have a HTML table in a page <table id="options_table"></table>
I want to automatically on page load:
- DELETE the HTML TABLE TAG 开发者_Go百科from one location in a webpage
- Paste it at another location below this SPAN tag
<span><a href="test">test</a><br /></span>
Is this possible in Jquery?
You just need to append it. First, give the span an ID:
<span id="afterMe"><a href="test">test</a><br /></span>
Then use the following jQuery snippet:
$('#afterMe').after($('#options_table'));
Here is a simple example: http://jsfiddle.net/vAewz/
jQuery will automatically move the node. No need to call .detach().
Working example: http://jsfiddle.net/vvgLU/
$('#my-span').after($('#options_table').detach())
$.detach
$.after
The examples for both should get you going.
You asked specifically about JQuery, but [unsolicited advice alert!] you don't need to resort to the framework. Instead:
<table id="source"> ... </table>
<table id="dest"> ... </table>
then something like this:
getRefToDiv("dest").innerHTML = getRefToDiv("source").innerHTML;
getRefToDiv("source").innerHTML = "";
You could also do it this way.
If you put a span or a div tag around the two interchanging spots, then on page load you could just do something like this:
<span id="start"><table id="options_table"></table></span>
<span id="finish"></span>
$(document).ready(function() {
var table = $('#start').html();
$('#start').html('');
$('#finish').html(table);
});
Something like this should work
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#click").click(function(e) {
e.preventDefault();
$("#options_table").appendTo('#target');
});
});
</script>
</head>
<body>
<table id='options_table'>
<tr>
<td>Something here</td>
</tr>
</table>
<span id="target"><a id="click" href="test">test</a><br /></span>
</body>
</html>
加载中,请稍侯......
精彩评论