克隆表TD的內容與jQuery

Question

我試圖得到以下結果的div：

Button onclick 
Clone closet Table <td></td> contents 
Append to div 

這裏是我的代碼：

$(document).on('click', '.addtofavs', function() { 
    var user_id = $(this).closest('tr').find('.userId').text(); 
    $("tr").clone().appendTo("#favorite"); 
    $("#tfhover tr").clone().appendTo("#div"); 
}); 

但這種克隆整個表並追加到div 。

我該如何解決這個問題？

Answer 1

的問題是，你正在運行的克隆方法是這樣的：

$("tr").clone().appendTo("#favorite"); 

這將克隆整個匹配要求 - 文檔中的每個元素<tr>。如果您想克隆特定的<td>元素，則需要專門針對它們。我想這就是你設置user_id變量的地方，但你沒有做任何事情。

Answer 2

我不知道你的HTML代碼，但這裏的追加和刪除FIDDLE

HTML

<table> 
    <tr> 
    <td>1</td> 
    <td><button class="addtofavs">+</button></td> 
    <td>Name</td> 
    </tr> 
    <tr>  
    <td>2</td> 
    <td><button class="addtofavs">+</button></td> 
    <td>Name</td> 
    </tr>  
    <tr> 
    <td>3</td> 
    <td><button class="addtofavs">+</button></td> 
    <td>Name</td> 
    </tr> 
    <tr> 
    <td>4</td> 
    <td><button class="addtofavs">+</button></td> 
    <td>Name</td> 
    </tr>  
    <tr> 
    <td>5</td> 
    <td><button class="addtofavs">+</button></td> 
    <td>Name</td> 
    </tr> 
</table> 

<div id="favorite"></div> 

CSS

table { 
    position: relative; 
    float: left; 
    border: 1px solid #ddd; 
    border-collapse: collapse; 
} 
td { 
    height: 22px; 
    padding: 0 5px; 
    line-height: 22px; 
    border: 1px solid #ddd; 
} 
td:first-child { 
    width: 15px; 
    text-align: center; 
} 
div { 
    position: relative; 
    float: left; 
    width: 150px; 
    height: 133px; 
    letter-spacing: 2px; 
    border: 1px solid #ddd; 
} 
.fav { 
    display: block; 
    float: left; 
    width: 25px; 
    height: 25px; 
    margin: 2px; 
    line-height: 25px; 
    text-align: center; 
    cursor: pointer; 
    border: 1px solid #ccc; 
} 
.rem { 
    background: #ddd; 
    position: absolute; 
    display: block; 
    margin-top: -17px; 
    margin-left: 20px; 
    padding: 0 3px; 
    font-size: 10px; 
    border-radius: 4px; 
} 

例

jQuery的

$(function() { 
    $('.addtofavs').on('click', function() { 
    $('#favorite').append('<span class="fav">'+$(this).parent('td').prev().text()+'</span>'); 
    }); 
    $(document).on('mouseover','.fav', function() { 
    $(this).prepend('<span class="rem">Remove</span>');   
    }).on('mouseleave','.fav', function() { 
    $('.rem').remove(); 
    }); 
    $(document).on('click','.rem', function() { 
    $(this,'.rem').parent().remove(); 
    }); 
});