diff --git a/docs/example-widget-editable.html b/docs/example-widget-editable.html
index 97751ed0..0246e96a 100644
--- a/docs/example-widget-editable.html
+++ b/docs/example-widget-editable.html
@@ -38,7 +38,7 @@ td.no-edit, span.no-edit {
editable_columns : [0,1,2], // point to the columns to make editable (zero-based index)
editable_enterToAccept : true, // press enter to accept content, or click outside if false
editable_autoResort : false, // auto resort after the content has changed.
- editable_noEdit : 'no-edit' // class name of cell that is no editable
+ editable_noEdit : 'no-edit' // class name of cell that is not editable
}
});
@@ -57,7 +57,9 @@ td.no-edit, span.no-edit {
NOTE!
- This widget can not be applied to the original plugin and requires jQuery 1.7+ and a browser that supports
contenteditable
attributes (almost all modern browsers).
- - Additional CSS is needed to highlight a focused editable table cell. See the CSS block below.
+ - Note: In Internet Explorer, please wrap the cell content with a DIV or SPAN as it is not possible to make table cells directly contenteditable. Wrapping the content in the markup is much more efficient than using javascript to do it for you (especially in IE).
+ - Updated v2.13.2, because of the limitation in IE, if a table cell contains any DIV or SPAN immediately inside the cell, it will be targeted instead of the table cell itself and made content editable. So, if you don't care about IE support, there is no need to include the extra markup.
+ - In some browsers, additional CSS is needed to highlight a focused editable table cell. See the CSS block below.
- Editable widget options include (defaults in parenthesis):
editable_column
([]
) - Contains an array of columns numbers you want to have editable content (zero-based index). contenteditable="true"
is added to cells within these columns.
@@ -99,40 +101,40 @@ td.no-edit, span.no-edit {
Peter |
- Parker |
- 28 |
+ Parker |
+ 28 |
$9.99 |
20% |
Jul 6, 2006 8:14 AM |
- John |
- Hood |
- 33 |
+ John |
+ Hood |
+ 33 |
$19.99 |
25% |
Dec 10, 2002 5:14 AM |
- Clark |
- Kent |
- 18 |
+ Clark |
+ Kent |
+ 18 |
$15.89 |
44% |
Jan 12, 2003 11:14 AM |
- Bruce |
- Almighty |
- 45 |
+ Bruce |
+ Almighty |
+ 45 |
$153.19 |
44% |
Jan 18, 2001 9:12 AM |
- Bruce |
- Evans |
- 22 |
+ Bruce |
+ Evans |
+ 22 |
$13.19 |
11% |
Jan 18, 2007 9:12 AM |
diff --git a/docs/index.html b/docs/index.html
index 52689e82..15115c8b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -296,7 +296,7 @@
- Columns widget (v2.0.17)
- - Content Editable widget (v2.9).
+ - Content Editable widget (v2.9; v2.13.2).
- Filter Widget:
- basic (v2.0.18; v2.10)
diff --git a/js/widgets/widget-editable.js b/js/widgets/widget-editable.js
index c2b3e571..49fafb9e 100644
--- a/js/widgets/widget-editable.js
+++ b/js/widgets/widget-editable.js
@@ -18,11 +18,17 @@
},
init: function(table, thisWidget, c, wo){
if (!wo.editable_columns.length) { return; }
- var cols = [];
+ var $t, cols = [];
$.each(wo.editable_columns, function(i, col){
cols.push('td:nth-child(' + (col + 1) + ')');
});
- c.$tbodies.find( cols.join(',') ).not('.' + wo.editable_noEdit).prop('contenteditable', true);
+ // IE does not allow making TR/TH/TD cells directly editable (issue #404)
+ // so add a div or span inside ( it's faster than using wrapInner() )
+ c.$tbodies.find( cols.join(',') ).not('.' + wo.editable_noEdit).each(function(){
+ // test for children, if they exist, then make the children editable
+ $t = $(this);
+ ( $t.children().length ? $t.children() : $t ).prop('contenteditable', true);
+ });
c.$tbodies
.on('mouseleave.tseditable', function(){
if (c.$table.data('contentFocused')) {
@@ -58,7 +64,7 @@
if (t) {
c.$table
.data('contentFocused', false)
- .trigger('updateCell', [ $this, wo.editable_autoResort, function(table){
+ .trigger('updateCell', [ $this.closest('td'), wo.editable_autoResort, function(table){
$this.trigger( wo.editable_editComplete );
} ]);
$this.trigger('blur.tseditable');