Delete HTML Table and paste it in another portion of the webpage, Is this possible using JQuery?_问答_开发者

Delete HTML Table and paste it in another portion of the webpage, Is this possible using JQuery?

开发者 https://www.devze.com 2023-03-09 15:12 出处：网络

I have a HTML table in a page<table id=\"options_table\"></table> I want to automatically on page load:

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>