如何在 Microsoft Edge 上选择和复制表格元素？ (CTRL + C)答案

【问题标题】：How to select and copy table element on Microsoft Edge? (CTRL + C)如何在 Microsoft Edge 上选择和复制表格元素？ (CTRL + C)
【发布时间】：2019-08-01 07:26:39
【问题描述】：

How to select and copy a table element on Microsoft Edge?
This works in Chrome, Firefox, and IE11. Is the below code deprecated?
Please help!!

        <table id="testTable">
            <thead>
                <tr class="primary">
                    <th>Solution</th>
                    <th>A</th>
                    <th>B</th>
                    <th>C</th>
                    <th>D</th>
                    <th>E</th>
                    <th>F</th>
                    <th>G</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
               <tr>
                 <td>Test 1</td>
                 <td>€912 000.00</td>
                 <td>€50 640.00</td>
                 <td>€1 363 837.50</td>
                 <td>€1 322 845.33</td>
                 <td>€10 800.00</td>
                 <td>€1 041 666.67</td>
                 <td>€416 666.67</td>
                 <td>€5 118 456.17</td>
                </tr>
         </tbody>
    </table>



        $("#copyAllBtn").off("click").on("click", function (event) {
            var el = document.getElementById("resulttable");
            var body = document.body, range, sel;
            if (document.createRange && window.getSelection) {
                range = document.createRange();
                sel = window.getSelection();
                sel.removeAllRanges();
                try {
                    range.selectNodeContents(el);
                    sel.addRange(range);
                } catch (e) {
                    range.selectNode(el);
                    sel.addRange(range);
                }
            } else if (body.createTextRange) {
                range = body.createTextRange();
                range.moveToElementText(el);
                range.select();
            }    
            document.execCommand("copy");                
        });

我知道复制在某些事件点击时有效，我已经更新了最新代码，我在点击复制按钮时调用复制功能。该代码不会引发任何错误，但不会在 Edge 上执行任何操作。请提出一些修改建议。

【问题讨论】：

你在哪里打电话给selectElementContents？控制台有什么错误吗？
@ThumChoonTat 我已经用我的最新代码更新了问题，我已经在单击按钮时编写了复制代码。控制台中没有错误，它只是在边缘没有做任何事情（在 IE11 中工作正常）

标签： javascript html dom copy microsoft-edge

【解决方案1】：

我尝试测试您的代码，发现您上面的代码示例甚至无法在任何其他浏览器上运行。这可能是一个逻辑问题。我建议你尝试在你身边运行上面的例子来检查结果。

尝试逐步调试您的代码可以为您提供有关问题的信息。

另一种方法是使用.clone() 方法。

您可以尝试参考下面的示例。它已在 chrome 和 MS Edge 浏览器上进行了测试，并且运行良好。

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

$('#copy1').click(function() {

$('tr.selected', '#exampleTable1').each(function() {

    // For each "selected" row of table1 ..
    var rowFromTable1 = $(this);

    // .. Take a clone/copy of it ..
    var clonedRowFromTable1 = rowFromTable1.clone();

    // .. And append the cloned row to the tbody of table2
    $('tbody', '#exampleTable2').append( clonedRowFromTable1 )
 })

 })

});
</script>
	
	
</head>
<body>
<table id="exampleTable1" style="max-width:50%;">
    <thead>
        <tr>
            <th>bar-code</th>
            <th>product name</th>
        </tr>
    </thead>
    <tbody>
        <tr role="row" class="odd selected">
            <td class="sorting_1">545333456</td>
            <td>Galaxy S9</td>
        </tr>
        <tr role="row" class="even selected">
            <td class="sorting_1">876543</td>
            <td>Galaxy S6</td>
        </tr>
        <tr role="row" class="odd">
            <td class="sorting_1">407654</td>
            <td>SD 64G </td>
        </tr>
        <tr role="row" class="even selected">
            <td class="sorting_1">876543</td>
            <td>Galaxy S5</td>
        <tr role="row" class="odd">
            <td class="sorting_1">407654</td>
            <td>Iphone 7 </td>
        </tr>
    </tbody>
</table>

<table id="exampleTable2" style="max-width:50%;">
    <thead>
        <tr>
            <th>bar-code</th>
            <th>product name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        </tr>
        <tr>
        </tr>
    </tbody>
</table>

<button class="btn btn-success" data-panelId="copy1" id="copy1">
    Copy from exampleTable1 To exampleTable1
</button>


</body>
</html>

在 MS Edge 浏览器中的输出：

此外，您可以根据自己的要求修改示例。

参考：

Copy data from selected rows of one table to another table using jQuery

【讨论】：