자바 스크립트가 포함 된 전체 테이블을 선택하십시오 (클립 보드에 복사).

자바 스크립트가 포함 된 전체 테이블을 선택하십시오 (클립 보드에 복사).

---

사용자가 선택 항목을 마우스 오른쪽 버튼으로 클릭하고 클립 보드에 복사 한 다음 Excel에 붙여 넣을 수 있도록 js 전체 테이블을 사용하여 선택하는 방법을 아는 사람이 있는지 궁금합니다. 테이블을 수동으로 선택하면 프로세스가 완벽하게 작동합니다. 그러나 때로는 테이블 높이가 화면보다 몇 배 크면 마우스를 드래그하여 선택하는 것이 지루합니다. 따라서 사용자에게 "전체 테이블 선택"버튼을 클릭하면 모든 것이 복사 될 준비가됩니다.

어떤 아이디어?

---

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

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

데모 : 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') );">

---

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

<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') );">

---

마지막으로 다음 스크립트를 사용하여 IE9에서 작동하도록했습니다.

참고 : html 테이블에서는 작동하지 않습니다. 그것은 DIV이어야합니다. 따라서 선택해야 할 테이블 주위에 래퍼 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);              
 }  
}

---

여기 내가 사용한 것입니다. 또한 복사 명령을 만들어서 배치 할 문서에 붙여 넣기 명령을 사용하기 만하면됩니다. 기본적으로 복사하려는 콘텐츠를 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>

참고URL : https://stackoverflow.com/questions/2044616/select-a-complete-table-with-javascript-to-be-copied-to-clipboard