使用 jQuery 将表 td 内容克隆到 div [关闭]答案

【问题标题】：Cloning table td contents to div with jQuery [closed]使用 jQuery 将表 td 内容克隆到 div [关闭]
【发布时间】：2018-01-16 05:53:29
【问题描述】：

我正在尝试得到以下结果：

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。

我该如何解决这个问题？

【问题讨论】：

请出示您的完整代码。
显示 html 的简化版本

标签： javascript jquery html ajax html-table

【解决方案1】：

问题是您正在运行这样的克隆方法：

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

这将克隆整个匹配集 - 文档中的每个 <tr> 元素。如果要克隆特定的<td> 元素，则需要专门针对它们。我认为这就是你设置 user_id 变量的地方，但你没有对它做任何事情。

【讨论】：

【解决方案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();
  });
});

【讨论】：