Internet Explorer 11でContentEditableが動作しない

Question

私は1つの列に編集ボタンがあるHTMLテーブルを持っています。ユーザーが「編集」ボタンを押すと、列の1つが編集可能になるはずです。これはChrome/Safari/Firefoxで動作しますが、IEでは動作しません。編集ボタンを押すことができますが、一度押すと、列の編集はできません。

IEでこの機能を使用するにはどうすればよいですか？ contenteditableはIEと互換性がありますか？そうでない場合、回避策は何ですか？

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：Internet ExplorerののcontentEditableで

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

がテーブルに適用することができない、COL、COLGROUP、TBODY、TD、TFOOT、TH、THEAD、およびTR要素直接、コンテンツ編集可能なSPAN、またはDIV要素を個々のテーブルセル内に配置することができます（http://msdn.microsoft.com/en-us/library/ie/ms533690(v=vs.85).aspxを参照）。