có thể chỉnh sửa nội dung không hoạt động trong IE 10

Question

Tôi đang cố gắng tạo bảng có thể chỉnh sửa ở phía máy khách. Đây là mã của tôi. Nó hoạt động trong Chrome, Firefox nhưng không hoạt động trong IE. Có điều gì liên quan đến kịch bản cho IE không?

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

Answer 1

Có nhiều phần tử trong IE, không thể đặt trực tiếp contenteditable. Tuy nhiên, bạn có thể quấn toàn bộ table vào nội dung có thể chỉnh sửa div.

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

Điều này sẽ make all the cells in the table editable. Mặc dù trong một số trình duyệt (FF), chế độ xem sẽ hơi lộn xộn do các nút điều chỉnh hiển thị của bảng.

Một khả năng khác là thêm ví dụ: nội dung có thể chỉnh sửa span hoặc div cho mỗi td.

Answer 2

IE không phản hồi contenteditable bên trong td thẻ.

Bạn có thể thử:

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