如何允许编辑 HTML 表格中的单元格？答案

【问题标题】：How to allow editing of cells within HTML table?如何允许编辑 HTML 表格中的单元格？
【发布时间】：2013-08-24 12:46:24
【问题描述】：

如何使 HTML 表格中的空白单元格可编辑？

我希望能够保存已输入的文本，以便以后可以检索和显示表格。

【问题讨论】：

标签： html html-table cell

【解决方案1】：

/** * 此方法生成用于插入 html 文件的 html 表格行。 * 生成表格行后，该方法会追加 * 表格行末尾的占位符，用于插入下一条记录 */ 字符串 generate_student_record_html(int record_num, int reg_num, 字符串 nic_num, 字符串学生姓名, 字符串性别, 字符串父亲姓名) {

string new_record = "";
new_record.append("<tr>");

new_record.append("<td>");
new_record.append(to_string(record_num));
new_record.append("</td>");

new_record.append("<td>");
new_record.append(to_string(reg_num));
new_record.append("</td>");

new_record.append("<td>");
new_record.append(nic_num);
new_record.append("</td>");

new_record.append("<td>");
new_record.append(student_name);
new_record.append("</td>");

new_record.append("<td>");
new_record.append(gender);
new_record.append("</td>");

new_record.append("<td>");
new_record.append(father_name);
new_record.append("</td>");

new_record.append("</tr>");
new_record.append(PLACE_HOLDER); // for next record

return new_record;

}

【讨论】：

【解决方案2】：

您可以在任何单元格上使用contentEditable 属性，包括空白单元格：

<td contentEditable>

Browser support 很好。如果使用 XHTML 语法，请将属性写为contenteditable="true"。

需要在您希望使其可编辑的每个单元格上单独设置该属性，除非您想要例如表格中的所有单元格都可编辑，在这种情况下，只需在 table 属性上设置属性即可。

问题的第二段涉及其他问题，过于模糊而无法回答，应在描述性标题下作为单独的问题发布。通常，您可以通过几种方式保存用户输入的数据，例如通过 JavaScript 使用 HTML 存储 (localStorage) 或通过 Ajax 调用或通过表单提交将数据发送到服务器端处理。

【讨论】：