javascript 通过将输入框放在 td 上使表格单元格可编辑
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31718183/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make a table cell editable by placing input box over td
提问by Naveen
I want to make a table cell editable on double click so that I can put some value in cell :
我想让一个表格单元格在双击时可编辑，以便我可以在单元格中输入一些值：
Currently I am placing a input box inside td on dblclick on it :
目前我在 dblclick 上的 td 内放置了一个输入框：
$('<input type="text" />').val(oldCellval).appendTo($this).end().focus().select();
$thisis my tdelement in which I want to show input box on double click, On blurI am removing input box and setting new value back.
$this是我td想要在双击时显示输入框的元素，On blur我正在删除输入框并重新设置新值。
I would like to show inputbox overtd element instead of insideit so that it will appear input is inside tdelement, because I am using a table library which only allows text inside tdelements, on adding html element(input) inside td its not working properly. Any help is much appreciated.
我想在td 元素上而不是在其中显示input框，以便它显示输入在元素内，因为我使用的表库只允许元素内的文本，在td 内添加 html element( ) 时它无法正常工作。任何帮助深表感谢。tdtdinput
回答by Shrinivas Pai
For similar result you can use contenteditable
对于类似的结果，您可以使用 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>
回答by Pranav C Balan
You can do something like this,using contenteditableattribute that you can avoid input tag
你可以做这样的事情，使用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>回答by 3pic
https://code.google.com/p/jquery-datatables-editable/
https://code.google.com/p/jquery-datatables-editable/
I think you should use this great plugin called JQuery Datatableshttps://www.datatables.net/
我认为您应该使用这个名为JQuery Datatables https://www.datatables.net/ 的出色插件
This has a "editable" feature, https://editor.datatables.net/, working great, from where you can also update your MySQL DB : https://code.google.com/p/jquery-datatables-editable/
这有一个“可编辑”功能，https://editor.datatables.net/，效果很好，您还可以从那里更新您的 MySQL 数据库：https: //code.google.com/p/jquery-datatables-editable/
You need to dive in and spend some time to master it. Once done it is a great tool for lots of table projects.
您需要深入了解并花一些时间来掌握它。完成后，它是许多表格项目的绝佳工具。
回答by Soni
If you set contenteditable='true' in this way this will probably not work in IE. So I recommend you to add a div in td in this way
如果您以这种方式设置 contenteditable='true'，这在 IE 中可能不起作用。所以我建议你在td中添加一个div这种方式
and in Js on double click of cell make the cell editable
并在 Js 中双击单元格使单元格可编辑
$(this).find('#editdiv').prop('contenteditable', true)
