以表格形式实现查看/编辑模式

Question

我们的表单需要支持查看/编辑模式。在编辑模式下，所有字段都是可编辑的。在查看模式下，它们是只读的。也许有可以应用的CSS样式，或者输入框可以转换为标签。

仅供参考，我们的应用程序是在Spring MVC中，我们已经研究了一些想法：

1. 扩展Spring MVC的表单标签从服务器端支持查看/编辑
2. 一些JS/jQuery的调整
3. 一些CSS调整

我发现了一个类似的主题在此： Implement read/edit mode in form

<form data-mode="read"> 
    <input value="Hello" /> 
</form> 

if($('form').data('mode') == 'read'){ //remove fields and add text 
    $('form').find(':input').each(function(){ 
    $(this).replaceWith($('<span>' + $(this).val() + '</span>'); 
    }); 
} 

的建议是，有一个表格标签属性，例如“数据模式”，但这是一个自定义属性？

对于这个问题，无论是从JS，CSS还是SpringMVC（服务器端）的角度来看，什么是标准的，很好的解决方案？谢谢

Answer 1

你可以有两种形式。输入和标签并基于表单模式显示/隐藏它们。

<div style"display:none"> 
Name: <input> 
<div> 
<div> 
    Name: My Name 
<div>