jquery 点击列数据复制到剪切板
时间: 2023-11-06 18:04:39 浏览: 87
以下是一个简单的示例代码,使用jQuery和clipboard.js库来实现点击表格列数据复制到剪切板:
HTML代码:
```html
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td class="copy">张三</td>
<td>25</td>
<td class="copy">zhangsan@example.com</td>
</tr>
<tr>
<td class="copy">李四</td>
<td>30</td>
<td class="copy">lisi@example.com</td>
</tr>
<tr>
<td class="copy">王五</td>
<td>28</td>
<td class="copy">wangwu@example.com</td>
</tr>
</tbody>
</table>
```
JavaScript代码:
```javascript
// 初始化clipboard.js
new ClipboardJS('.copy', {
text: function(trigger) {
return $(trigger).text();
}
});
// 绑定点击事件
$('table').on('click', '.copy', function() {
// 触发clipboard.js复制操作
$(this).trigger('click');
// 弹出复制成功提示
alert('已复制到剪切板');
});
```
上面的代码中,我们通过在表格列上添加`.copy`类来标识要进行复制的数据,然后使用clipboard.js库来实现复制操作。当用户点击表格列时,我们使用jQuery来触发clipboard.js的复制操作,并弹出一个提示框告诉用户复制成功。
阅读全文