Question

我想获得以下结果：

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();
  });
});

用jQuery克隆表td内容到div

2 个答案: