9

클라이언트 측 편집 가능 테이블을 생성하려고합니다. 여기 내 코드가있다. Chrome, Firefox에서는 작동하지만 IE에서는 작동하지 않습니다. IE 용 스크립트와 관련이 있습니까?contenteditable이 IE 10에서 작동하지 않습니다.

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 

$("td").click(function(){ 
if($(this).attr("contentEditable") == true){ 
    $(this).attr("contentEditable","false"); 
} else { 
    $(this).attr("contentEditable","true"); 
} 
}) 
}); 
</script> 

<p> 
<table id='transitTable' border="1" cellspacing="2" cellpadding="2" class='display' width="400"> 
<tr id='1'> 
<td >H1</td> 
<td >H2</td> 
<td >H3</td> 
<td >H4</td></tr> 
<tr id='2'> 
<td >R1</td> 
<td >R1</td> 
<td >R1</td> 
<td >R1</td></tr> 
<tr id='3'> 
<td >R2</td> 
<td >R2</td> 
<td >R2</td> 
<td>R2</td></tr></table></p> 

답변

12

IE에는 많은 요소가 있으며, contenteditable을 직접 설정할 수 없습니다. 그러나 table 전체를 콘텐츠 편집 가능 div으로 묶을 수 있습니다.

<div contenteditable="true"> 
    <table> 
     ... 
    </table> 
</div> 

이것은 make all the cells in the table editable입니다. 일부 브라우저 (FF)에서는 표의 편집 핸들로 인해보기가 약간 엉망이됩니다.

또 다른 가능성은 각 td에 편집 가능한 내용 span 또는 div을 추가하는 것입니다.

+0

감사 티무합니다. 그것은 효과가 있었다. :) –

+0

@Teemu : 히피. inputbox를 편집 할 수 없도록 만들고 싶다면 어떻게해야합니까? IE9에서 contenteditable = "false"가 작동하지 않습니다. 크롬과 잘 어울립니다. – Dharmraj

+0

@Dharmraj 예를 들어'readonly = "true"'를 사용할 수 있습니다. – Teemu

4

IE가 contenteditabletd 태그 안에 없습니다.

당신이 시도 할 수 :

<td id="my-content" class="editable"> 
    <div contentEditable="true" style="width: 100%; height: 100%;"> 
     ... 
    </div> 
</td> 
관련 문제