ContentEditable 在 Internet Explorer 11 中不起作用

Question

我有一个 HTML 表格，其中有一列中有一个编辑按钮。当用户按下“编辑”按钮时，其中一列应该变为可编辑的。这适用于 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：

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

在 Internet Explorer 中，contenteditable 不能直接应用于 TABLE、COL、COLGROUP、TBODY、TD、TFOOT、TH、THEAD 和 TR 元素，可以将内容可编辑的 SPAN 或 DIV 元素放置在各个表格单元格内（见http://msdn.microsoft.com/en-us/library/ie/ms533690(v=vs.85).aspx)。