问题描述:

I am tring to clone selected object from one table to another . Till now i am getting the id of selected td to be cloned . Following is the code i am trying.

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

<style type="text/css">

.row-highlight

{

background-color: Yellow;

}

</style>

<script type="text/javascript">

$(function() {

var message = $('#message');

var tr = $('#tbl,#tbl2').find('tr');

tr.bind('click', function(event) {

var values = '';

tr.removeClass('row-highlight');

var tds = $(this).addClass('row-highlight').find('td');

$.each(tds, function(index, item) {

values = item.id;

});

message.html(values);

});

});

</script>

</head>

<body>

<form>

<table>

<tr>

<td>

<table id="tbl" style="border: solid 1px black">

<tr>

<td id="a">

1

</td>

</tr>

<tr>

<td id="b">

2

</td>

</tr>

<tr>

<td id="c">

3

</td>

</tr>

</table>

</td>

<td>

<table>

<tr>

<td><input type="button"name="button one" value=">>" onclick=""</td>

</tr><tr>

<td><input type="button" name="button two" value="<<" onclick=""</td>

</tr>

</table>

</td>

<td>

<table id="tbl2" style="border: solid 1px black">

<tr>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

<br />

<div id="message">

</div>

</form>

</body>

</html>

How to clone and delete the selected item from table "tbl" to "tbl2" onclick function of button "button one " and vise versa on click of button "button two".

Thanks in advance.////

网友答案:

Just use, prepend() , append() methods. These methods will serve your purpose well.

You may use it some way like this:

var row = $(this).closest('tr').html();
$('#otherTable tbody').append('<tr>'+row+'</tr>');
网友答案:

prepend() and append() functions should do the trick. Another thing I had tried way back in js with a similar scenario was using document.getElementById(tableIDA) to first get the concerned table and then using tableA.insertRow(rowCountA) [where rowCountA is the row count of Table A], followed by tableA.insertCell() function and lastly, cell.appendChild(). It seems long but its actually very easy and procedural to use. May be this will help your purpose.

网友答案:

No need to explicitly .clone(), in case that ever came across your mind.

You can avoid rebuilding elements from HTML (as you might lose any event handlers if you are not using event delegation) by directly using .append(), .appendTo(), prepend() or prependTo()

Psuedo-codes:

$A.appendTo($B);
// or
$B.append($A);

Example:

$('tr.highlighted').appendTo( $('#otherTable tbody') );

The reverse also works:

$('#otherTable tbody').append($('tr.highlighted'));
相关阅读:
Top