JavaScript가있는 완전한 테이블을 선택하십시오 (클립 보드에 복사하려면)

Question

누군가가 전체 테이블을 사용하여 선택하는 방법을 알고 있는지 궁금해서 사용자가 선택을 마우스 오른쪽 버튼으로 클릭하고 클립 보드에 복사 한 다음 Excel에 붙여 넣을 수 있습니다. 테이블을 수동으로 선택하면 프로세스가 완벽하게 작동합니다. 그러나 때로는 테이블 높이가 화면보다 몇 배 더 큰 경우 마우스를 드래그하는 것이 지루해집니다. 따라서 사용자에게 "전체 테이블 선택"버튼을 클릭하면 모든 것이 복사 될 수 있습니다.

어떤 아이디어?

Answer 1

예. 너무 까다 롭지 않으며 다음은 모든 주류 브라우저 (IE 6 포함 및 실제로 5)에서 작동합니다.

(Jukka Korpela의 의견 후 2012 년 9 월 7 일 업데이트 이전 버전이 IE 9 표준 모드에서 작동하지 않았다는 점을 지적했습니다)

데모: http://jsfiddle.net/timdown/hgkgp/749/

암호:

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

Tim이 제안한 코드를보다 완전하게 만들기 위해 선택한 컨텐츠를 클립 보드에 자동으로 복사 할 수 있습니다.

<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

다음 스크립트를 사용하여 IE9에서 작업하게되었습니다.

참고 : HTML 테이블에서는 작동하지 않습니다. 그것은 div 여야합니다. 따라서 선택해야 할 테이블 주위에 래퍼 디바리를 넣으십시오!

먼저 HTML 버튼 코드를 약간 변경했습니다.

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

그런 다음 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);              
 }  
}

Answer 4

여기 내가 사용한 것이 있습니다. 또한 사본 명령을 내리므로 배치하려는 문서에서 페이스트 명령을 사용하기 만하면됩니다. 기본적으로 DIV로 복사하려는 내용을 랩핑하고 InnerHTML을 사용하여 가져 와서 클립 보드에 복사합니다. 모든 브라우저에서 테스트하지는 않았지만 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>