Seleziona una tabella completa con Javascript (da copiare negli appunti)

Mi stavo chiedendo se qualcuno sa come selezionare usando js la tabella completa, in modo che l’utente possa fare clic con il pulsante destro del mouse sulla selezione, copiarla negli Appunti e quindi incollarla su Excel. Se si seleziona la tabella manualmente, il processo funziona perfettamente. Ma a volte, se l’altezza del tavolo è alcune volte più grande dello schermo, selezionarlo trascinando il mouse diventa noioso. Quindi, voglio dare agli utenti la possibilità di cliccare su un pulsante “seleziona l’intera tabella” e tutto è pronto per essere copiato.

Qualche idea?

Sì. Non è troppo complicato, e quanto segue funzionerà su tutti i principali browser (inclusi IE 6 e, in effetti, 5):

(Aggiornato il 7 settembre 2012 dopo il commento di Jukka Korpela sottolineando che la versione precedente non funzionava in modalità standard IE 9)

Demo: http://jsfiddle.net/timdown/hGkGp/749/

Codice:

function selectElementContents(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); } catch (e) { range.selectNode(el); sel.addRange(range); } } else if (body.createTextRange) { range = body.createTextRange(); range.moveToElementText(el); range.select(); } } 
 
Heading 1Heading 2
cell 1cell 2

Finalmente ho funzionato su IE9 usando il seguente script

NOTA: non funziona su tabelle html. Deve essere un DIV. Quindi basta mettere un wrapper DIV attorno al tavolo che devi selezionare!

Per prima cosa ho cambiato il codice del pulsante HTML un po ‘:

  

Quindi ha cambiato il javascript in:

 function SelectContent (el) { var elemToSelect = document.getElementById (el); if (window.getSelection) { // all browsers, except IE before version 9 var selection = window.getSelection (); var rangeToSelect = document.createRange (); rangeToSelect.selectNodeContents (elemToSelect); selection.removeAllRanges (); selection.addRange (rangeToSelect); } else // Internet Explorer before version 9 if (document.body.createTextRange) { // Internet Explorer var rangeToSelect = document.body.createTextRange (); rangeToSelect.moveToElementText (elemToSelect); rangeToSelect.select (); } else if (document.createRange && window.getSelection) { range = document.createRange(); range.selectNodeContents(el); sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } } 

Solo per rendere più completo il codice proposto da Tim Down, consentendo di copiare automaticamente il contenuto selezionato negli appunti:

  
HeadingHeading
cellcell

Ecco cosa ho usato. Crea anche il comando copia, quindi tutto ciò che devi fare è usare il comando incolla nel documento in cui vuoi inserirlo. Fondamentalmente si avvolge il contenuto che si desidera copiare in un div, afferrarlo usando innerHTML e copiarlo negli appunti. Non l’ho provato su tutti i browser ma funziona su Chrome, Safari, Firefox.