时间戳

首页 > 解决方案 > 单击按钮复制单元格列逗号分隔

javascript - 单击按钮复制单元格列逗号分隔

问题描述

我有一个带有一个特定列的 HTML 表，我想通过按一个按钮将其复制到剪贴板。该列包含容器编号，我给它一个类“.container”

这是我到目前为止的代码。HTML：

<button onclick="copyToClipboard('.container')">Copy container #s</button>

Javascript：

<script>
    function copyToClipboard(element) {
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val($(element).text()).select();
        document.execCommand("copy");
        $temp.remove();
      }
</script>

改编自这个问题，我所做的唯一更改是使其成为类选择器而不是 ID 选择器以获取表格范围：单击按钮复制到剪贴板使用 jQuery

当我单击按钮时，它会复制所有具有“.container”类的单元格的内容。挑战在于它复制所有单元格内容而不在其间放置任何空格。理想情况下，我想在不同的单元格内容之间放置一个逗号、行间距或其他类型的分隔符。

我尝试了不同的代码变体，如下所示：

$("body"+", ").append($temp);
    
$("body").append($temp+ ", ");
    
$("body").append($temp).append(", ");

但这些都行不通。我有一种感觉，它不起作用的原因是 $temp 变量已经包含了所有单元格内容的串联字符串，所以此时进行任何字符串拆分都为时已晚。

因此，我认为改变需要发生在这条线上：

<button onclick="copyToClipboard('.container')">Copy container #s</button>

但我只是不确定如何修改它，以便它循环遍历每个单元格，并在其间附加一个逗号。任何帮助表示赞赏

标签： javascripthtmljquery

解决方案

为了与您分开，,您必须通过tds 运行一个循环。您可以映射所有 tds 文本并将其与,.

$(element).find('td').map(function(){
     return $(this).text();
}).get();

请参阅下面的片段：

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);

  //Added below code;
  var cellValues = $(element).find('td').map(function(){
      return $(this).text();
  }).get();
  var allCellValues = cellValues.join(',');
  //Added above code;
  
  $temp.val(allCellValues).select();
  document.execCommand("copy");
  $temp.remove();
  
  console.log(allCellValues);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="container"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>

<button onclick="copyToClipboard('.container')">Copy container #s</button>

你也可以在这里测试它。

推荐阅读