如何使 HTML 表格单元格可编辑？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6012823/
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
How to make HTML table cell editable?
提问by wqfeng
I'd like to make some cells of html table editable, simply double click a cell, input some text and the changes can be sent to server. I don't want to use some toolkits like dojo data grid. Because it provides some other features. Would you provide me some code snippet or advices on how to implement it?
我想让一些 html 表格的单元格可编辑，只需双击一个单元格，输入一些文本，更改就可以发送到服务器。我不想使用像 dojo 数据网格这样的工具包。因为它提供了一些其他功能。你能给我一些代码片段或关于如何实现它的建议吗？
回答by Brett Zamir
You can use the contenteditable attribute on the cells, rows, or table in question.
您可以对相关单元格、行或表格使用 contenteditable 属性。
Updated for IE8 compatibility
更新了 IE8 兼容性
<table>
<tr><td><div contenteditable>I'm editable</div></td><td><div contenteditable>I'm also editable</div></td></tr>
<tr><td>I'm not editable</td></tr>
</table>
Just note that if you make the table editable, in Mozilla at least, you can delete rows, etc.
请注意，如果您使表格可编辑，至少在 Mozilla 中，您可以删除行等。
You'd also need to check whether your target audience's browsers supported this attribute.
您还需要检查目标受众的浏览器是否支持此属性。
As far as listening for the changes (so you can send to the server), see contenteditable change events
至于监听更改（以便您可以发送到服务器），请参阅contenteditable 更改事件
回答by vardhan
HTML5 supports contenteditable,
HTML5 支持内容可编辑，
<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>
3rd party edit
第三方编辑
To quote the mdn entry on contenteditable
The attribute must take one of the following values:
true or the empty string, which indicates that the element must be editable;
false, which indicates that the element must not be editable.
If this attribute is not set, its default value is inherited from its parent element.
This attribute is an enumerated one and not a Boolean one. This means that the explicit usage of one of the values true, false or the empty string is mandatory and that a shorthand ... is not allowed.
该属性必须采用以下值之一：
true 或空字符串，表示该元素必须是可编辑的；
false，表示该元素不可编辑。
如果未设置此属性，则从其父元素继承其默认值。
此属性是枚举属性，而不是布尔属性。这意味着必须显式使用 true、false 或空字符串之一，并且不允许使用简写 ...。
// wrong not allowed
<label contenteditable>Example Label</label>
// correct usage
<label contenteditable="true">Example Label</label>.
回答by Bhavesh Gangani
I have three approaches,
Here you can use both <input>or <textarea>as per your requirements.
我有三种方法，您可以在这里使用这两种方法<input>或<textarea>根据您的要求使用。
1. Use Input in <td>.
1. 在 中使用输入<td>。
Using <input>element in all <td>s,
<input>在所有<td>s 中使用element ，
<tr><td><input type="text"></td>....</tr>
Also, you might want to resize the input to the size of its td. ex.,
此外，您可能希望将输入的大小调整为其td. 前任。，
input { width:100%; height:100%; }
You can additionally change the colour of the border of the input box when it is not being edited.
您还可以在未编辑时更改输入框边框的颜色。
2. Use contenteditable='true'attribute. (HTML5)
2. 使用contenteditable='true'属性。(HTML5)
However, if you want to use contenteditable='true', you might also want to save the appropriate values to the database. You can achieve this with ajax.
但是，如果您想使用contenteditable='true'，您可能还想将适当的值保存到数据库中。您可以使用 ajax 实现这一点。
You can attach keyhandlers keyup, keydown, keypressetc to the <td>. Also, it is good to use some delay()with those events when user continuously types, the ajax event won't fire with every key user press. for example,
您可以将keyhandlers keyup，keydown，keypress等来的<td>。此外，当用户连续输入时，最好对这些事件使用一些delay()，ajax 事件不会随着用户每次按下按键而触发。例如，
$('table td').keyup(function() {
clearTimeout($.data(this, 'timer'));
var wait = setTimeout(saveData, 500); // delay after user types
$(this).data('timer', wait);
});
function saveData() {
// ... ajax ...
}
3. Append <input>to <td>when it is clicked.
3. 附加<input>到<td>点击时。
Add the input element in tdwhen the <td>is clicked, replace its value according to the td's value. When the input is blurred, change the `td's value with the input's value. All this with javascript.
在点击td时添加输入元素，<td>根据td的值替换其值。当输入模糊时，将 `td 的值更改为输入的值。所有这一切都使用 javascript。
回答by ACE Arthur
This is a single and runnable example.
这是一个单一且可运行的示例。
<html>
<head>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <!-- jQuery source -->
</head>
<body>
<table align="center">
<tr> <td>id</td> <td>name</td> </tr>
<tr> <td>001</td> <td>dog</td> </tr>
<tr> <td>002</td> <td>cat</td> </tr>
<tr> <td>003</td> <td>pig</td> </tr>
</table>
<script>
$(function(){
$("td").click(function(event){
if($(this).children("input").length > 0)
return false;
var tdObj = $(this);
var preText = tdObj.html();
var inputObj = $("<input type='text' />");
tdObj.html("");
inputObj.width(tdObj.width())
.height(tdObj.height())
.css({border:"0px",fontSize:"17px"})
.val(preText)
.appendTo(tdObj)
.trigger("focus")
.trigger("select");
inputObj.keyup(function(event){
if(13 == event.which) { // press ENTER-key
var text = $(this).val();
tdObj.html(text);
}
else if(27 == event.which) { // press ESC-key
tdObj.html(preText);
}
});
inputObj.click(function(){
return false;
});
});
});
</script>
</body>
</html>
回答by Ahmad Halah
You can use x-editable https://vitalets.github.io/x-editable/its awesome library from bootstrap
您可以使用 x-editable https://vitalets.github.io/x-editable/来自 bootstrap 的很棒的库
回答by user3751006
Try this code.
试试这个代码。
$(function () {
$("td").dblclick(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing");
$(this).html("<input type="text" value="" + OriginalContent + "" />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
}
});
$(this).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
});
});
You can also visit this link for more details :
您也可以访问此链接了解更多详情：
回答by user3333866
If you use Jquery, this plugin help you is simple, but is good
如果你使用 Jquery，这个插件帮助你很简单，但是很好
回答by gsivanov
Just insert <input>element in <td>dynamically, on cell click. Only simple HTML and Javascript. No need for contentEditable, jquery, HTML5
只需在单元格单击时动态插入<input>元素<td>。只有简单的 HTML 和 Javascript。不需要contentEditable, jquery,HTML5
回答by mathmaniac88
This is the essential point although you don't need to make the code this messy. Instead you could just iterate through all the <td>and add the <input>with the attributes and finally put in the values.
尽管您不需要使代码变得如此混乱，但这是至关重要的一点。相反，您可以遍历所有的<td>并添加<input>属性，最后放入值。
function edit(el) {
el.childNodes[0].removeAttribute("disabled");
el.childNodes[0].focus();
window.getSelection().removeAllRanges();
}
function disable(el) {
el.setAttribute("disabled","");
}<table border>
<tr>
<td ondblclick="edit(this)"><input value="cell1" disabled onblur="disable(this)"></td>
<td ondblclick="edit(this)"><input value="cell2" disabled onblur="disable(this)"></td>
<td ondblclick="edit(this)"><input value="cell3" disabled onblur="disable(this)"></td>
<td ondblclick="edit(this)"><input value="so forth..." disabled onblur="disable(this)">
</td>
</tr>
</table>回答by bharti parmar
I am using this for editable field
我将此用于可编辑字段
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead>
<tr>
<th class="text-center">Citation</th>
<th class="text-center">Security</th>
<th class="text-center">Implementation</th>
<th class="text-center">Description</th>
<th class="text-center">Solution</th>
<th class="text-center">Remove</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pt-3-half" contenteditable="false">Aurelia Vega</td>
<td class="pt-3-half" contenteditable="false">30</td>
<td class="pt-3-half" contenteditable="false">Deepends</td>
<td class="pt-3-half" contenteditable="true"><input type="text" name="add1" value="spain" class="border-none"></td>
<td class="pt-3-half" contenteditable="true"><input type="text" name="add1" value="marid" class="border-none"></td>
<td>
<span class="table-remove"><button type="button"
class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span>
</td>
</tr>
</tbody>
</table>