web-dev-qa-db-fra.com

Sélectionne un tableau complet avec Javascript (à copier dans le presse papier)

Je me demandais si quelqu'un savait comment utiliser js le tableau complet pour que l'utilisateur puisse cliquer avec le bouton droit de la souris sur la sélection, la copier dans le presse-papiers et la coller ensuite dans Excel. Si vous sélectionnez la table manuellement, le processus fonctionne parfaitement. Mais parfois, si la hauteur de la table est quelques fois supérieure à celle de l’écran, le sélectionner en faisant glisser la souris devient fastidieux. Donc, je veux 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?

javascriptselecthighlight
55
DanC

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

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

Démo: 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') );">

93
Tim Down

Je l'ai finalement fait fonctionner dans IE9 en utilisant le script suivant

REMARQUE: cela ne fonctionne pas sur les tables HTML. Ce doit être un DIV. Il suffit donc de placer un DIV wrapper autour de la table que vous devez sélectionner!

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

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

Puis changé le javascript à:

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);              
 }  
}
7
Anders Tore Boye Lauridsen

Juste pour compléter le code proposé par Tim Down, 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') );">
6
Daniel

Voici ce que j'ai utilisé. Il crée également la commande de copie de sorte que tout ce que vous avez à faire est d’utiliser la commande Coller du document dans lequel vous souhaitez le placer. Fondamentalement, vous encapsulez le contenu que vous souhaitez copier dans une div, vous le récupérez à l'aide de innerHTML et vous le copiez dans le presse-papiers. Je ne l'ai pas testé sur tous les navigateurs, mais cela fonctionne sous 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>
0
Mark Parrish