如何使 HTML 表格单元格可编辑? [英] How to make HTML table cell editable?

问题描述

我想让html表格的一些单元格可编辑，只需双击一个单元格，输入一些文本，更改就可以发送到服务器.我不想使用像 dojo 数据网格这样的工具包.因为它提供了一些其他功能.你能给我一些代码片段或关于如何实现它的建议吗?

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?

推荐答案

您可以对相关单元格、行或表格使用 contenteditable 属性.

You can use the contenteditable attribute on the cells, rows, or table in question.

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

请注意，如果您使表格可编辑，至少在 Mozilla 中，您可以删除行等.

Just note that if you make the table editable, in Mozilla at least, you can delete rows, etc.

您还需要检查目标受众的浏览器是否支持此属性.

You'd also need to check whether your target audience's browsers supported this attribute.

至于监听更改(以便您可以发送到服务器)，请参阅 contenteditable 更改事件

As far as listening for the changes (so you can send to the server), see contenteditable change events

这篇关于如何使 HTML 表格单元格可编辑?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！