js 复制表格列内容
2022-02-27 本文已影响0人
王二麻子88
整体思路:
先获取DOM中相关列的值(获取接口数据同理)
将数据汇总至复制的变量中, 并创建textarea标签, 选中js控制光标选中标签的内容, 执行复制操作, 结束之后销毁新创建的标签
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>复制列</title>
<style>
* {
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<table border="1" cellpadding="0">
<tr>
<th>
<button id="copy">复制</button>
</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
<tr>
<td class="shuzi">aaaaaaaaaaaaaa</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="shuzi">bbbbbbbbbbbbb</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="shuzi">ccccccccccc</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="shuzi">dddd</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
// 选中一列
content = "";
$("table tr td,table tr th").on("click", function () {
var index = $(this).index();
content = "";
// 获取每列的值,并置入待复制的队列中
Array.from($("table tr td")).forEach(item => {
if (item.cellIndex == index) {
content += item.innerHTML + "\n";
}
});
var flag = copyText(content);
alert(flag ? "复制成功！" : "复制失败！");
});
function copyText(text) {
var textarea = document.createElement("textarea");//创建input对象
var currentFocus = document.activeElement;//当前获得焦点的元素
document.body.appendChild(textarea);//添加元素
// 给表单赋值
textarea.value = text;
// 判断光标是否在第一位置
textarea.focus();
if (textarea.setSelectionRange)
textarea.setSelectionRange(0, textarea.value.length);//获取光标起始位置到结束位置
else
textarea.select();
try {
var flag = document.execCommand("copy");//执行复制
} catch (eo) {
var flag = false;
}
document.body.removeChild(textarea);//删除元素
currentFocus.focus();
return flag;
}
</script>
</html>
