Sélectionner un tableau complet avec Javascript (à copier dans le presse-papiers)

Question

Je me demandais si quelqu'un sait comment sélectionner à l'aide de js le tableau complet, de sorte que l'utilisateur puisse cliquer avec le bouton droit de la souris sur la sélection, la copier dans le presse-papiers, puis la coller dans Excel. Si vous sélectionnez le tableau manuellement, le processus fonctionne parfaitement. Mais parfois, si la hauteur du tableau est plusieurs fois supérieure à celle de l'écran, le sélectionner en faisant glisser la souris devient fastidieux. Je veux donc donner aux utilisateurs la possibilité de cliquer sur un bouton "sélectionner le tableau entier" et tout est prêt à être copié.

Des idées ?

Answer 1

Oui. Ce n'est pas trop compliqué, et ce qui suit fonctionnera dans tous les navigateurs courants (y compris IE 6, et même 5) :

(Mis à jour le 7 septembre 2012 après le commentaire de Jukka Korpela signalant que la version précédente ne fonctionnait pas en mode standard d'IE 9)

Démonstration : http://jsfiddle.net/timdown/hGkGp/749/

Code :

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();
    }
}

<table id="tableId" border="1">
    <thead>
        <tr><th>Heading 1</th><th>Heading 2</th></tr>
    </thead>
    <tbody>
        <tr><td>cell 1</td><td>cell 2</td></tr>
    </tbody>
</table>

<input type="button" value="select table" onclick="selectElementContents( document.getElementById('tableId') );">

Answer 2

Juste pour rendre le code proposé par Tim Down plus complet, en permettant au contenu sélectionné d'être automatiquement copié dans le presse-papiers :

<script type="text/javascript">
    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);
            }
            document.execCommand("copy");

        } else if (body.createTextRange) {
            range = body.createTextRange();
            range.moveToElementText(el);
            range.select();
            range.execCommand("Copy");
        }
    }
</script>

<table id="tableId">
    <thead>
        <tr><th>Heading</th><th>Heading</th></tr>
    </thead>
    <tbody>
        <tr><td>cell</td><td>cell</td></tr>
    </tbody>
</table>

<input type="button" value="select table"
   onclick="selectElementContents( document.getElementById('tableId') );">

Answer 3

J'ai finalement réussi à le faire fonctionner dans IE9 en utilisant le script suivant

NOTE : Cela ne fonctionne pas sur les tableaux html. Il faut que ce soit un DIV. Il suffit donc de placer un DIV enveloppant autour du tableau que vous voulez sélectionner !

J'ai d'abord modifié un peu le code HTML du bouton :

<input type="button" value="Mark table"    onclick="SelectContent('table1');">  

Puis j'ai changé le javascript en :

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);              
 }  
}

Answer 4

Voici ce que j'ai utilisé. Il rend également la commande de copie de sorte que tout ce que vous avez à faire est d'utiliser la commande de collage dans le document que vous voulez le placer dans. En gros, vous enveloppez le contenu que vous voulez copier dans un div, vous le saisissez en utilisant innerHTML et vous le copiez dans le presse-papiers. Je ne l'ai pas testé sur tous les navigateurs mais il fonctionne dans Chrome, Safari, Firefox.

<div id="copycontent">
<table>
</table>
</div>
<input type="button" value="Mark table"    onclick="SelectContent('copycontent');">

<script type="text/javascript">
function SelectContent (el) {    
  var aux = document.createElement("div");
  aux.setAttribute("contentEditable", true);
  aux.innerHTML = document.getElementById("main").innerHTML;
  aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)"); 
  document.body.appendChild(aux);
  aux.focus();
  document.execCommand("copy");
  document.body.removeChild(aux);
}
</script>