将 ContentEditable 插入 HTML 表格答案

【问题标题】：Inserting ContentEditable into an HTML table将 ContentEditable 插入 HTML 表格
【发布时间】：2016-10-25 15:07:05
【问题描述】：

我将表格的 html 存储在 $scheduletext 中。我希望能够在单击时编辑表格的任何单元格，因此我使用 JQuery 进行单击操作。当我单击一个单元格时，它变为空白但不允许我输入，我需要更改什么才能输入？

<html>
    <body>         
        <div id="main">
            <?php 
                print_r($scheduletext);
            ?> 
        </div>
        <script type="text/javascript">
            $('td').click(function(){
                $(this).html("<contenteditable>");
            });
        </script>
    </body>
</html>

出于编辑和测试的目的，因为要运行我的代码，您还需要表格，CSS 也不会受到伤害......我将它转储到 JSfiddle 中，希望能让任何想要帮助我的人更容易：https://jsfiddle.net/4yczepsj/ 提前致谢！！

编辑：由于某种原因，JSfiddle 在单击时根本不做任何事情，但在我网站上的实时模型上，单击时单元格变为空白，但无法输入任何内容。

【问题讨论】：

您需要在 JSFiddle 中包含 jQuery。这可以通过单击 JS 框中右上角的“JavaScript”按钮来完成。

标签： javascript jquery html

【解决方案1】：

在调用.html("<contenteditable>") 时，您正在修改td 元素的内部HTML 以包含<contenteditable> 元素（这是无效的）。你真正想做的是设置contenteditable 属性：

$(this).prop('contenteditable', true);

【讨论】：

【解决方案2】：

contentEditable 是一个属性。

试试这个：

$(this).attr('contentEditable', true);

【讨论】：

【解决方案3】：

Content Editable 是一个属性，而不是一个元素。您想将属性contenteditable 添加到您希望拥有可编辑内容的元素中。

$('td').click(function(){
    $(this).attr("contenteditable");
});

【讨论】：

【解决方案4】：

https://jsfiddle.net/4yczepsj/1/

$('table').on('mousedown', 'td', function (event) {
  $(event.target).closest('td').prop("contentEditable", true);
});

【讨论】：

【解决方案5】：

注意这包括其他答案包含的信息，感谢他们，但我要添加更多内容并将其全部放在一个地方。

我做了以下更改：

添加了 tabindex，以便表格单元格可以表格化。
点击时将焦点放在表格单元格上。
在焦点上添加contenteditable 属性。
在焦点上选择表格单元格的内容。
删除blur上的contenteditable（当td失去焦点时）。

function setSelection(element) {
  // code for selection from http://stackoverflow.com/questions/3805852/select-all-text-in-contenteditable-div-when-it-focus-click#answer-3806004
  setTimeout(function() {
    var sel, range;
        if (window.getSelection && document.createRange) {
            range = document.createRange();
            range.selectNodeContents(element);
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(element);
            range.select();
        }
  }, 0)
}

// add tabindex to all tds.
$('td').attr('tabindex', 0);

$('td').on('focus', function() {
  $(this).attr('contenteditable', true);
  setSelection(this);
}).on('blur', function() {
  $(this).attr('contenteditable', false);
})

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  font-size: 90%;
}
th,
td {
  padding: 8px;
}
td {
  text-align: center;
}
table {
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div id="main">
  <table>
    <tr>
      <th></th>
      <th>22oz Dark</th>
      <th>12ct 4oz Dark</th>
    </tr>
    <tr>
      <th>2016-01-01</th>
      <td>9785</td>
      <td>2478</td>
    </tr>
    <tr>
      <th>2016-01-02</th>
      <td>8754</td>
      <td>2136</td>
    </tr>
    <tr>
      <th>2016-01-03</th>
      <td>13587</td>
      <td>2203</td>
    </tr>
    <tr>
      <th>2016-01-04</th>
      <td>14111</td>
      <td>3297</td>
    </tr>
    <tr>
      <th>2016-01-05</th>
      <td>13212</td>
      <td>3101</td>
    </tr>
    <tr>
      <th>2016-01-06</th>
      <td>16335</td>
      <td>3299</td>
    </tr>
    <tr>
      <th>2016-01-07</th>
      <td>15421</td>
      <td>3100</td>
    </tr>
  </table>
</div>
</body>

</html>

【讨论】：