通过将输入框放在 td 上使表格单元格可编辑答案

【问题标题】：Make a table cell editable by placing input box over td通过将输入框放在 td 上使表格单元格可编辑
【发布时间】：2018-07-19 05:14:21
【问题描述】：

我想让一个表格单元格在双击时可编辑，这样我就可以在单元格中输入一些值：

目前我在 dblclick 上的 td 内放置一个输入框：

$('<input type="text" />').val(oldCellval).appendTo($this).end().focus().select();

$this 是我的td 元素，我想在其中双击显示输入框，On blur 我正在删除输入框并重新设置新值。

我想显示 input 框 over td 元素而不是 inside 它，这样它就会显示输入在 td 元素内，因为我正在使用一个表格库，它只允许在 td 元素中添加文本，在 td 中添加 html 元素（input）时它无法正常工作。任何帮助深表感谢。

【问题讨论】：

如果您必须在编辑后更新内容，重叠有什么好处？用输入替换 td 并在编辑后用新值替换输入不是更简单吗？ $(selector).html('html to replace')，如果你重新创建原始 td，库会抱怨吗？
替换 td 元素的 html 内容会产生问题。

标签： javascript jquery css html-table

【解决方案1】：

对于类似的结果，您可以使用contenteditable

<table border="3">
<thead>
<tr>Heading 1</tr>
<tr>Heading 2</tr>
</thead>
<tbody>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
</tbody>
</table>

小提琴：https://jsfiddle.net/kpkjr7ev/

【讨论】：

这会将输入框永久添加到 td，我不能将输入框放在 td 内，因为这给我带来了问题，我也无法向 td 元素添加属性，因为 tds 是由库内部创建的，我只给数据和列名作为创建表的输入。

【解决方案2】：

你可以这样做，使用 contenteditable 属性，你可以避免输入标签

$('td').on({
  'dblclick': function() {
    $(this).prop('contenteditable', true);
  },
  'blur': function() {
    $(this).prop('contenteditable', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border=1>
  <thead>
    <tr>Heading 1</tr>
    <tr>Heading 2</tr>
  </thead>
  <tbody>
    <tr>
      <td>ddd</td>
      <td>ddd</td>
    </tr>
    <tr>
      <td>ddd</td>
      <td>ddd</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案3】：

https://code.google.com/p/jquery-datatables-editable/

我认为您应该使用这个名为 JQuery Datatables 的出色插件 https://www.datatables.net/

这有一个“可编辑”功能，https://editor.datatables.net/，效果很好，您还可以从中更新您的 MySQL 数据库： https://code.google.com/p/jquery-datatables-editable/

您需要深入研究并花一些时间来掌握它。完成后，它是许多表格项目的绝佳工具。

【讨论】：

【解决方案4】：

如果你这样设置 contenteditable='true' 这可能在 IE 中不起作用。所以我建议你这样在td中添加一个div

在 Js 中双击单元格使单元格可编辑

 $(this).find('#editdiv').prop('contenteditable', true)

【讨论】：