将隐藏的表复制到剪贴板

Question

我想将<div id="table-clipboard" >的隐藏表复制到剪贴板中，但是此javascript代码仅在未隐藏表的情况下有效。 如何将隐藏的表复制到剪贴板？

HTML代码：

    <div id="table-clipboard" >
                          <table border="1" class="text-center" display:none>
                            <thead >
                            <tr  bgcolor="#00b0f0";>
                              <th>ID</th>
                              <th>Customer</th>
                              <th>Node</th>
                              <th>Koordinat Customer</th>
                              <th>Teknologi Jar. Aktivasi</th>
                              <th> POP</th>
                              <th> Jenis Perangkat yang Digunakan</th>
                              <th>Perangkat di POP</th>
                              <th>ID Titik Tapping</th>
                              <th>Koordinat Tapping </th>
                              <th>Panjang Tarikan Kabel (meter)</th>
                              <th>Kapasitas Kabel</th>
                              <th>Tikor JB 1</th>
                              <th>Tikor JB 2</th>
                              <th>Tikor JB 3</th>
                            </tr>
                              <!-- <th></th> -->
                            </thead>
    </table>
    </div>

  <input type="button" value="Copy" id="copy">

JavaScript代码：

   $('#table-clipboard').hide();

   $('#copy').on('click', function() {

      var el = document.getElementById('table-clipboard');
      // alert(el);

      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);
          document.execCommand("copy");
        } catch (e) {
          range.selectNode(el);
          sel.addRange(range);
          document.execCommand("copy");
        }
      } else if (body.createTextRange) {
        range = body.createTextRange();
        range.moveToElementText(el);
        range.select();
        document.execCommand("copy");
      }
    });

Answer 1

这是一个hack，但是也许您可以将opacity: 0设置为opacity: 0单击按钮并删除display: none时为opacity: 0 display: none ？

要么

分离表，然后删除display: none 。

Answer 2

<script>
    $('#table-clipboard').hide();
    $('#copy').click(function() {
        $('#table-clipboard').show();
        $('#table-clipboard').css("opacity", "0");

        var el = document.getElementById('table-clipboard');
        // alert(el);

        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);
                document.execCommand("copy");
            } catch (e) {
                range.selectNode(el);
                sel.addRange(range);
                document.execCommand("copy");
            }
        } else if (body.createTextRange) {
            range = body.createTextRange();
            range.moveToElementText(el);
            range.select();
            document.execCommand("copy");
        }
        $('#table-clipboard').hide();
    });
</script>

基于@ dr4g0n的想法，我修改了代码。 它按预期工作。 触发按钮后，您将显示div并将其不透明度更改为0，并在函数结束时再次将其隐藏。