js 复制表格列内容

作者: 王二麻子88 | 来源:发表于2022-02-27 21:24 被阅读0次

js 复制表格列内容
html点击复制table内容
两个使用Excel表格的小技巧
高效办公技巧之拖动玩转Excel
行列转换
js复制内容
根据json数据创建表格的方法并能够控制表格翻页
Element表格
说说如何基于 Vue.js 实现表格组件
点击复制

整体思路:
先获取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>