将所选行克隆并删除到另一个表

时间:2013-04-22 10:10:54

标签: jquery html clone

我想将所选对象从一个表克隆到另一个表。直到现在我正在获取要克隆的选定td的ID。以下是我正在尝试的代码。

<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>

如何克隆和删除所选项目从表格“tbl”到“tbl2”按钮“按钮1”的点击功能,反之亦然点击按钮“按钮2”。 在此先感谢.////// p>

3 个答案:

答案 0 :(得分:5)

只需使用,prepend(),append()方法。 这些方法将很好地满足您的目的。

你可以用这样的方式使用它:

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

答案 1 :(得分:1)

prepend()和append()函数应该可以解决问题。我在js中尝试过类似场景的另一件事是使用document.getElementById(tableIDA)首先获取相关表,然后使用tableA.insertRow(rowCountA)[其中rowCountA是表A的行数],后跟tableA.insertCell()函数,最后是cell.appendChild()。它似乎很长但实际上非常容易和程序化使用。可能这会有助于你的目的。

答案 2 :(得分:1)

如果遇到您的想法,则无需明确.clone()

通过直接使用.append().appendTo()prepend()或{{1>,您可以避免重建HTML中的元素(如果您没有使用事件委派,可能会失去任何事件处理程序) }}

伪码:

prependTo()

示例:

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

反过来也有效:

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