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) представление будет немного беспорядочным из-за показанных ручек редактирования таблицы.

Другая возможность - добавить, например, редактируемый контент span или div каждому td.

+0

благодаря Тиму. Это сработало. :) –

+0

@Teemu: hie. Что делать, если я хочу, чтобы ящик ввода не был выбран? contenteditable = "false" не работает в IE9. Хорошо работает с хромом. – Dharmraj

+0

@Dharmraj Вы можете использовать, например, 'readonly =" true "'. – Teemu

4

IE не является ответом contenteditable внутри td бирка.

Вы можете попробовать:

<td id="my-content" class="editable"> 
    <div contentEditable="true" style="width: 100%; height: 100%;"> 
     ... 
    </div> 
</td> 
Смежные вопросы