ContentEditable在Internet Explorer 11中不起作用

Question

I have an HTML table with an edit button in one column. When a user presses the "Edit" button, one of the columns should become editable. This works in Chrome/Safari/Firefox but it does not work in IE. It will allow me to press the edit button, however, once it is pressed, it will not allow any column edits to be made.

How can I make this function in IE as well? Is contenteditable compatible with IE? If not, what would be a 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

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