contenteditable 在 IE 10 中不起作用 [英] contenteditable not working in IE 10

问题描述

我正在尝试创建客户端可编辑表格.这是我的代码.它适用于 Chrome、Firefox，但不适用于 IE.IE 的脚本还有什么关系吗?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></脚本><脚本>$(document).ready(function() {$("td").click(function(){if($(this).attr("contentEditable") == true){$(this).attr("contentEditable","false");} 别的 {$(this).attr("contentEditable","true");}})});<p><table id='transitTable' border="1" cellspacing="2" cellpadding="2" class='display' width="400"><td >H1</td><td >H2</td><td >H3</td><td >H4</td></tr><td >R1</td><td >R1</td><td >R1</td><td >R1</td></tr><td >R2</td><td >R2</td><td >R2</td><td>R2</td></tr></table></p>

解决方案

IE中的元素很多，不能有contenteditable 直接设置.但是，您可以将整个 table 包装成一个内容可编辑的 div.

<表格>...

这将使表格中的所有单元格均可编辑.尽管在某些浏览器 (FF) 中，由于显示了表格的编辑句柄，因此视图会有些混乱.

另一种可能性是为每个 td 添加例如内容可编辑的 span 或 div.

I am trying to create client side editable table. Here is my code. It works in Chrome, Firefox but not in IE. Is there anything more to do with script for IE?

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

解决方案

There are many elements in IE, which can't have contenteditable set directly. However, you can wrap the whole table into a content editable div.

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

This will make all the cells in the table editable. Though in some browsers (FF) the view will be a bit messy due to the shown editing handles of the table.

Another possibility is to add for example a content editable span or div to each td.

这篇关于contenteditable 在 IE 10 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！