it-swarm.com.de

Wählen Sie eine vollständige Tabelle mit Javascript aus (um sie in die Zwischenablage zu kopieren)

Ich habe mich gefragt, ob jemand die vollständige Tabelle mit js auswählen kann, sodass der Benutzer mit der rechten Maustaste auf die Auswahl klicken, sie in die Zwischenablage kopieren und sie dann in Excel einfügen kann. Wenn Sie die Tabelle manuell auswählen, funktioniert der Prozess einwandfrei. Wenn jedoch die Tabellenhöhe einige Male größer ist als der Bildschirm, wird das Auswählen durch Ziehen mit der Maus langweilig. Ich möchte den Benutzern also die Möglichkeit geben, auf eine Schaltfläche zum Auswählen der gesamten Tabelle zu klicken, und alles wird zum Kopieren bereit. 

Irgendwelche Ideen?

55
DanC

Ja. Es ist nicht zu knifflig und Folgendes wird in allen gängigen Browsern (einschließlich IE 6 und 5) funktionieren:

(Aktualisiert am 7. September 2012 nach dem Kommentar von Jukka Korpela, in dem darauf hingewiesen wurde, dass die vorherige Version im Standardmodus IE 9) nicht funktioniert hat)

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

Ich habe es schließlich mit dem folgenden Skript in IE9 zum Laufen gebracht

HINWEIS: Es funktioniert nicht bei HTML-Tabellen. Es musste ein DIV sein. Legen Sie einfach einen Wrapper DIV um den Tisch, den Sie auswählen müssen!

Zuerst habe ich den HTML-Button-Code etwas geändert:

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

Dann wurde das Javascript geändert 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);              
 }  
}

Um den von Tim Down vorgeschlagenen Code noch vollständiger zu machen, kann der ausgewählte Inhalt automatisch in die Zwischenablage kopiert werden:

<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

Hier ist was ich verwendet habe. Es wird auch der Kopierbefehl erstellt, so dass Sie lediglich den Befehl "Einfügen" in dem Dokument verwenden möchten, in das Sie es einfügen möchten. Grundsätzlich wickeln Sie den zu kopierenden Inhalt in ein div ein, greifen ihn mit innerHTML auf und kopieren ihn in die Zwischenablage. Ich habe es nicht in allen Browsern getestet, aber es funktioniert in Chrome, Safari und 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