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

Question

我想在双击时使表格单元格可编辑，以便我可以在单元格中添加一些值：

目前我在dbclick上的td中放置一个输入框：

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

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

我想将input框显示在 td元素上，而不是在中，以便它显示输入在td元素内，因为我使用的表库只允许td元素内的文本，在td中添加html元素（input）时它不能正常工作。任何帮助深表感谢。

Answer 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/

Answer 2

您可以使用 contenteditable 属性执行此类操作，以避免输入标记

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 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/

你需要潜入并花一些时间来掌握它。完成后，它是许多表项目的一个很好的工具。

Answer 4

如果以这种方式设置contenteditable ='true' 这可能不适用于IE。 所以我建议你以这种方式在td中添加一个div

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

{{1}}