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

je me demandais si quelqu'un savait comment sélectionner en utilisant js la table complète, de sorte que l'utilisateur peut droit-cliquer sur la sélection, la Copier dans le presse-papiers et puis la coller sur Excel. Si vous sélectionnez la table manuellement, le processus fonctionne parfaitement. Mais parfois, si la hauteur de la table est plusieurs fois plus grande que l'écran, la sélectionner en faisant glisser la souris devient fastidieux. Donc, je veux donner aux utilisateurs la possibilité de cliquer sur un "sélectionner l'ensemble du tableau" bouton et tout est prêt à être copié.

des idées?

53
demandé sur Brian Tompsett - 汤莱恩 2010-01-11 23:14:58

4 réponses

Oui. Ce n'est pas trop délicat, et ce qui suit fonctionnera dans tous les navigateurs grand public (y compris IE 6, et en effet 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 9 standards IE)

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') );">
92
répondu Tim Down 2018-08-28 18:00:31

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

NOTE: cela ne fonctionne pas sur les tables html. Ça doit être un DIV. Alors mettez juste une 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');">

a ensuite 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);              
 }  
}
6
répondu Anders Tore Boye Lauridsen 2012-09-05 08:33:59

juste pour rendre le code proposé par Tim Down plus complet, 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') );">
5
répondu Daniel 2017-02-13 18:29:29

Voici ce que j'ai utilisé. Il fait aussi la commande Copier donc tout ce que vous avez à faire est d'utiliser la commande Coller dans le document dans lequel vous voulez le placer. Fondamentalement, vous envelopper le contenu que vous voulez copier dans une div, l'attraper en utilisant innerHTML et le copier dans le bloc-notes. 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>
0
répondu Mark Parrish 2018-07-19 13:43:58