Q: Copy the hidden table into clipboard I want to copy a hidden table within <div id="table-clipboard" > into clipboard but this javascript code only works when the table is not hidden. How can i copy a hidden table into clipboard ? 
HTML Code :
    <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 Code : 
   $('#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");
      }
    });


A: It is a hack, but perhaps you could set opacity: 0 when clicking the button, and removing the display: none?
OR
Detach the table and then remove the display: none.

A: <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>

Based on @dr4g0n's idea i modified the code. It's working as expected. When the button is triggered you show the div and change it's opacity to 0 and at the end of the function you hide it again.
