html - 如何允许编辑 HTML 表格中的单元格？

Question

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

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

Answer 1

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

<td contentEditable>

浏览器支持非常好。如果使用 XHTML 语法，请将属性写为contenteditable="true".

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

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

Answer 2

/** * 此方法生成 html 表格行以插入 html 文件。* 生成表行后，此方法会在表行末尾附加 * 占位符，用于插入下一条记录 */ string generate_student_record_html(int record_num, int reg_num, string nic_num, string student_name, string gender, string Father_name) {

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;

}