如何使用示例代码仅复制表的一部分

wgeznvg7  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(222)

https://jsfiddle.net/coderomeos/402olqrf/
我想使用下面的代码,它可以完美地在一个文档中复制文本。我想将其更改为处理两列表,只复制第2列。
任何帮助都将不胜感激。工作示例位于顶部链接中。

<div class="container">
  <div class='copied'></div>

  <div class="copy-to-clipboard">
    <input readonly type="text" value="Click Me To Copy" readonly>
  </div>
</div>

$(function() {
  $('.copy-to-clipboard input').click(function() {
    $(this).focus();
    $(this).select();
    document.execCommand('copy');
    $(".copied").text("Copied to clipboard").show().fadeOut(2500);
  });
});

.container {
  max-width: 25rem;
  background: #f7f7f7;
  margin: 2rem auto;
  position: relative;
  padding: 2rem;
  .copy-to-clipboard input {
    border: none;
    background: #fff;
    padding: 0.5rem;
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
  }
  .copied {
    position: absolute;
    background: #6ce890;
    color: #000;
    padding: 0.2rem;
    font-weight: bold;
    z-index: 99;
    bottom: 0;
    text-align: center;
    display: none;
    font-size: .8rem;
  }
}

The code in the example above is what I want to use but instead of all the text in a <div> only make column 2 able to be copied.

So say the first row of a 2 column table has the following:

Column1                       Column2
Sometext column 1             Some text column 2

only copy Some text in Column 2 to the clipboard.
zzlelutf

zzlelutf1#

假设您将使用表结构,您可以使用 $(this).closest('td').next('td').find('input') ```
$(function() {
$('.copy-cell').click(function() {
const other = $(this).next('td')
other.find('input').focus();
other.find('input').select();
document.execCommand('copy');
$(".copied").text("Copied to clipboard").show().fadeOut(2500);
});
});

.container td {
max-width: 25rem;
background: #f7f7f7;
margin: 2rem auto;
position: relative;
padding: 2rem;
}

td.copy-cell {
cursor: pointer;
}

input {
border: none;
background: #fff;
padding: 0.5rem;
width: 100%;
box-sizing: border-box;
}

.copied {
position: absolute;
background: #6ce890;
color: #000;
padding: 0.2rem;
font-weight: bold;
z-index: 99;
bottom: 0;
text-align: center;
display: none;
font-size: .8rem;
}

</td>

相关问题