將隱藏的表復制到剪貼板

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，並在函數結束時再次將其隱藏。