ContentEditable funktioniert nicht in Internet Explorer 11

Question

Ich habe eine HTML-Tabelle mit einer Bearbeitungsschaltfläche in einer Spalte. Wenn ein Benutzer die Schaltfläche "Bearbeiten" drückt, sollte eine der Spalten bearbeitbar sein. Dies funktioniert in Chrome/Safari/Firefox, funktioniert aber nicht in IE. Es erlaubt mir, den Edit-Knopf zu drücken, aber sobald es gedrückt wird, erlaubt es keine Spaltenänderungen.

Wie kann ich diese Funktion auch in IE machen? Ist contenteditable kompatibel mit IE? Wenn nicht, was wäre ein Workaround?

HTML:

<table id="merchTable" cellspacing="5" class="sortable"> 
    <thead> 
     <tr class="ui-widget-header"> 
      <th class="sorttable_nosort" style="display: none">ID</th> 
      <th class="sorttable_nosort">Loc</th> 
      <th class="merchRow">Report Code</th> 
      <th class="merchRow">SKU</th> 
      <th class="merchRow">Special ID</th> 
      <th class="merchRow">Description</th> 
      <th class="merchRow">Quantity</th> 
      <th class="sorttable_nosort">Unit</th> 
      <th class="sorttable_nosort">Edit</th> 
     </tr> 
    </thead> 
    <tbody> 

     <?php foreach ($dbh->query($query) as $row) {?> 

     <tr> 
      <td style="display: none" class="id"><?php echo $row['ID'];?></td> 
      <td class="loc"><?php echo $row['Loc'];?></td> 
      <td class="rp-code" align="center" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td> 
      <td class="sku" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td> 
      <td class="special-id" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td> 
      <td class="description" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td> 
      <td class="quantity" align="center" id="quantity-<?php echo intval ($row['Quantity'])?>"><?php echo $row['Quantity'];?></td> 
      <td class="unit" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td> 
      <td><button type="button" class="edit" name="edit">Edit</button></td> 
     </tr> 

    <?php } ?> 

    </tbody> 
</table> 

JavaScript:

$(document).on("click", "#merchTable .edit", function() { 
    var $this = $(this); 
    var tds = $this.closest('tr').find('td').filter(function() { 
    return $(this).find('.edit').length === 0; 
    }); 
    if ($this.text() === 'Edit') { 
    $this.text('Save'); 
    if($this.id !== '.quantity') { 
     tds.not('.loc').not('.rp-code').not('.sku').not('.special-id').not('.description').not('.unit').prop('contenteditable', true); 
    } 
    } else { 
    var isValid = true; 
    var errors = ''; 
    var elements = tds; 
    if (tds.find('input').length > 0) { 
     elements = tds.find('input'); 
    } 
    var dict = {}; 
    elements.each(function (index, element) { 
     var type = $(this).attr('class'); 
     var value = (element.tagName == 'INPUT') ? $(this).val() : $(this).text(); 
     console.log(type); 
     // ----- Switch statement that provides validation for each table cell ----- 
     switch (type) { 
     case "id": 
       dict["ID"] = value.trim(); 
      break; 
     case "quantity": 
     if ($.isNumeric(value)) { 
       dict["Quantity"] = value.trim(); 
      break; 
      } else { 
      isValid = false; 
      errors += "Please enter a numeric value\n"; 
      break; 
      } 
     } 
    }) 
    if (isValid) { 
     console.log(dict); 
     $this.text('Edit'); 
     tds.prop('contenteditable', false); 
     var request = $.ajax({ 
      type: "POST", 
      url: "update.php", 
      data: dict 
     }); 

     request.done(function (response, textStatus, jqXHR){ 
      if(JSON.parse(response) == true){ 
      console.log("row updated"); 
      } else { 
      console.log("row failed to updated"); 
      console.log(response); 
      console.log(textStatus); 
      console.log(jqXHR); 
      } 
     }); 

     // Callback handler that will be called on failure 
     request.fail(function (jqXHR, textStatus, errorThrown){ 
      // Log the error to the console 
      console.log(textStatus); 
      console.log(jqXHR); 
      console.error(
       "The following error occurred: "+ 
       textStatus, errorThrown 
      ); 
     }); 

     // Callback handler that will be called regardless 
     // if the request failed or succeeded 
     request.always(function() { 

     }); 
    } else { 
     alert(errors); 
    } 
    } 
}); 

Answer 1

In Internet Explorer contenteditable kann nicht auf die Tabelle, COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD und TR-Elemente angewendet werden direkt kann ein Inhalt editierbares SPAN- oder DIV-Element innerhalb der einzelnen Tabellenzellen platziert werden (siehe http://msdn.microsoft.com/en-us/library/ie/ms533690(v=vs.85).aspx).