单个表格可自定义内容，一键复制功能

2025-08-05 1331 黑猫导航网

一键复制表格

演示
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>一键复制表格</title> <style> table { border-collapse: collapse; width: 100%; margin-bottom: 10px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } button { padding: 8px 12px; background-color: #4CAF50; color: white; border: none; cursor: pointer; border-radius: 4px; } button:hover { background-color: #45a049; } </style> </head> <body> <table id="copyTable"> <thead> <tr> <th>代码</th> </tr> </thead> <tbody> <tr> <td> </td> </tr> </tbody> </table> <button onclick="copyTable()">一键复制表格内容</button> <script> function copyTable() { const table = document.getElementById('copyTable'); let textToCopy = ''; // 获取表头 const headers = table.querySelectorAll('thead th'); const headerText = Array.from(headers).map(th => th.textContent).join('\t'); textToCopy += headerText + '\n'; // 获取表格内容 const rows = table.querySelectorAll('tbody tr'); rows.forEach(row => { const cells = row.querySelectorAll('td'); const rowText = Array.from(cells).map(cell => cell.textContent).join('\t'); textToCopy += rowText + '\n'; }); // 复制到剪贴板 navigator.clipboard.writeText(textToCopy.trim()) .then(() => alert('表格内容已复制到剪贴板！')) .catch(err => alert('复制失败: ' + err)); } </script> </body> </html>

演示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一键复制表格</title>
<style>
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 10px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
button {
padding: 8px 12px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<table id="copyTable">
<thead>
<tr>
<th>代码</th>

</tr>
</thead>
<tbody>
<tr>
<td>

</td>

</tr>

</tbody>
</table>

<button onclick="copyTable()">一键复制表格内容</button>

<script>
function copyTable() {
const table = document.getElementById('copyTable');
let textToCopy = '';

// 获取表头
const headers = table.querySelectorAll('thead th');
const headerText = Array.from(headers).map(th => th.textContent).join('\t');
textToCopy += headerText + '\n';

// 获取表格内容
const rows = table.querySelectorAll('tbody tr');
rows.forEach(row => {
const cells = row.querySelectorAll('td');
const rowText = Array.from(cells).map(cell => cell.textContent).join('\t');
textToCopy += rowText + '\n';
});

// 复制到剪贴板
navigator.clipboard.writeText(textToCopy.trim())
.then(() => alert('表格内容已复制到剪贴板！'))
.catch(err => alert('复制失败: ' + err));
}
</script>
</body>
</html>

本文地址：https://www.hugogzs.top/post/149.html

1.本导航收录网站链接仅为用户提供便利，不代表认可其内容、服务及立场。
2.第三方网站内容更新等自行负责，黑猫导航不担合法性、安全性及准确性责任。
3.发现违法违规等不良内容请联系删除（QQ：[898820184]），核实后处理。
4.用户访问第三方网站应守法依规及遵守网站规定，风险自担。

评论列表（0条）

暂无评论，快来抢沙发吧~

发布评论取消回复

一	二	三	四	五	六	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31