html+js剪切板问题

lizf2019

如图，在如图的网页中，实现单击“复制”执行复制动作的js脚本有以下问题:
1.是否给“复制”文字加<a>标签中的onclick事件执行函数即可
2.求js操作剪切板的函数
3.表格之后会动态生成，核心代码如下：
如何在动态生成的情况下(php输出html)，实现点击"复制"即可复制当前行的链接呢？

[HTML] 纯文本查看 复制代码

<table>
    <tr>
        <!-- th为表格标题栏-->
        <th>序号</th>
        <th>名称</th>
        <th>链接地址</th>
        <th>添加时间</th>
        <th>备注</th>
        <th>复制链接</th>
    </tr>
    <tr>
        <td>1</td>
        <td>哈哈</td>
        <td><a href="#">http://p.com</a></td>
        <td>22-7-14 23:56</td>
        <td>一般来说， 可是，即使是这样，如何谈恋爱的出现仍然代表了一定的意义。 我们都知道，只要有意义，那么就必须慎重考虑。 要想清楚，如何谈恋爱，到底是一种怎么样的存在。 我认为， 本人也是经过了深思熟虑，在每个日日夜夜思考这个问题。 如何谈恋爱的发生，到底需要如何做到，不如何谈恋爱的发生，又会如何产生。 一般来讲，我们都必须务必慎重的考虑考虑。 俾斯麦说过一句富有哲理的话，对于不屈不挠的人来说，没有失败这回事。这句话语虽然很短，但令我浮想联翩。 黑塞说过一句富有哲理的话，有勇气承担命运这才是英雄好汉。这句话语虽然很短，但令我浮想联翩。 本人也是经过了深思熟虑，在每个日日夜夜思考这个问题。 就我个人来说，如何谈恋爱对我的意义，不能不说非常重大。</td>
        <td>
            <a href="#">复制</a>
        </td>
    </tr>

</table>

qeq66

1.先引入clipboard.js

[HTML] 纯文本查看 复制代码

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>

2.设置复制剪贴的内容
从另一个元素复制内容。你可以给目标元素添加一个 data-clipboard-target 属性来实现这个功能

[HTML] 纯文本查看 复制代码

<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

qeq66

[HTML] 纯文本查看 复制代码

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
<table>
    <tr>
        <!-- th为表格标题栏-->
        <th>序号</th>
        <th>名称</th>
        <th>链接地址</th>
        <th>添加时间</th>
        <th>备注</th>
        <th>复制链接</th>
    </tr>
    <tr>
        <td>1</td>
        <td>哈哈</td>
        <td><a href="#"  id="aaa_1">http://p.com</a></td>
        <td>22-7-14 23:56</td>
        <td>一般来说， 可是，即使是这样，如何谈恋爱的出现仍然代表了一定的意义。 我们都知道，只要有意义，那么就必须慎重考虑。 要想清楚，如何谈恋爱，到底是一种怎么样的存在。 我认为， 本人也是经过了深思熟虑，在每个日日夜夜思考这个问题。 如何谈恋爱的发生，到底需要如何做到，不如何谈恋爱的发生，又会如何产生。 一般来讲，我们都必须务必慎重的考虑考虑。 俾斯麦说过一句富有哲理的话，对于不屈不挠的人来说，没有失败这回事。这句话语虽然很短，但令我浮想联翩。 黑塞说过一句富有哲理的话，有勇气承担命运这才是英雄好汉。这句话语虽然很短，但令我浮想联翩。 本人也是经过了深思熟虑，在每个日日夜夜思考这个问题。 就我个人来说，如何谈恋爱对我的意义，不能不说非常重大。</td>
        <td>
            <a href="#" [color=rgb(18, 18, 18)][backcolor=inherit][font=Menlo, Monaco, Consolas, &quot]data-clipboard-target="#aaa_1"[/font][/backcolor][/color][font=-apple-system, BlinkMacSystemFont, &quot]>复制</a>[/font]
        </td>
    </tr>
 
<tr>
<td>1</td>
<td>哈哈</td>
<td><a href="#" id="aaa_2">http://p.com</a></td>
<td>22-7-14 23:56</td>
<td>一般来说， 可是，即使是这样，如何谈恋爱的出现仍然代表了一定的意义。 我们都知道，只要有意义，那么就必须慎重考虑。 要想清楚，如何谈恋爱，到底是一种怎么样的存在。 我认为， 本人也是经过了深思熟虑，在每个日日夜夜思考这个问题。 如何谈恋爱的发生，到底需要如何做到，不如何谈恋爱的发生，又会如何产生。 一般来讲，我们都必须务必慎重的考虑考虑。 俾斯麦说过一句富有哲理的话，对于不屈不挠的人来说，没有失败这回事。这句话语虽然很短，但令我浮想联翩。 黑塞说过一句富有哲理的话，有勇气承担命运这才是英雄好汉。这句话语虽然很短，但令我浮想联翩。 本人也是经过了深思熟虑，在每个日日夜夜思考这个问题。 就我个人来说，如何谈恋爱对我的意义，不能不说非常重大。</td>
<td>
<a href="#" [color=rgb(18, 18, 18)][backcolor=inherit][font=Menlo, Monaco, Consolas, &quot]data-clipboard-target="#aaa_2"[/font][/backcolor][/color][font=-apple-system, BlinkMacSystemFont, &quot]>复制</a>[/font]
</td>
</tr>
</table>

Mr.[先知]

用jq 就很好做
原生比较麻烦

原理 就是 给复制写一个onclick="copy(this)"
function copy(ev) {
    取ev的父节点的父节点tr 遍历它的td的下标2 取innerHtml
   
}

yuupuu

原生JS设置剪贴板
---

[HTML] 纯文本查看 复制代码

<style type="text/css">
#neirong{
	width: 300px;
	height: 60px;
	background: #eee;
}
</style>

<div id="neirong">这是内容这是内容这是内容这是内容</div>
<button id="copy">复制</button>

<script>
function copyArticle(event){
	  const range = document.createRange();
	  range.selectNode(document.getElementById('neirong'));
	  const selection = window.getSelection();
	  if(selection.rangeCount > 0) selection.removeAllRanges();
	  selection.addRange(range);
	  document.execCommand('copy');
	  alert("复制成功");
}

window.onload = function () {
  var obt = document.getElementById("copy");
  obt.addEventListener('click', copyArticle, false);
}
</script>

平淡最真

const copyToClipboard=(text)=>navigator.clipboard?.writeText&&navigator.clipboard.writeText(text);
copyToClipboard(“听说这样就可以复制到剪切板”)

formli

看了一下全是大佬啊！