javascript - 如何允许用户在 HTML 表格中输入元素

标签 javascript html user-interface data-entry

我想允许用户在 Web 应用程序中输入人员列表,然后将它们作为一批提交。每行看起来大致如下:

<TR>
    <TD> <INPUT name="person.fname"> </TD>
    <TD> <INPUT name="person.lname"> </TD>
    <TD> <INPUT name="person.birthdate"> </TD>
</TR>

表单以一行空白输入开始,我希望在用户填写任何字段时向列表中添加一个新行——即列表按需增长。同样,当用户清除其中的所有字段时,我希望某行消失。

实现它的最简单、最可靠和最可维护的方法是什么?

最后,如何将这个值表提交回服务器?命名每个字段的首选方式是什么,以便服务器可以根据输入的值创建 Person 实体列表?

最佳答案

如果您熟悉 jQuery,则可以使用 .change 处理程序来捕捉它们对字段的更改。测试看是否是最后一行,里面是否有数据。如果他们把所有东西都拿走了,就把它拿走。 jQuery 有一些很棒的方法可以做到这一点,但这完全取决于您要如何编写它。如果是这样,请使用 jQuery 的 .append 函数追加新行。如果您使用 Python 和 cgi_app,并且对每种类型的单元格使用相同的名称属性,则可以使用 form.getlist('fname[]'),它将返回一个名称数组。

关于javascript - 如何允许用户在 HTML 表格中输入元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4185046/

相关文章:

javascript - 读取 HTML 表单提交上的 JSON 文件

javascript - 如何保持DIV拉伸(stretch)到高度为100%的网页底部并溢出:auto using CSS only?

javascript - 风格拖鬼元素

html - 全高侧边栏与带有 flexbox 的 Wordpress 相同

java - JPanel 消耗整个 JFrame

javascript - 简单的 html 编辑器并使用 div 或 textarea 获取 html 内容

javascript - Ng-Switch 破坏 <select> 默认/Ng-Init 值

javascript - jQuery - CSS - 函数 - 尝试更改当前标签的类

Java : JLayeredPane resize problem

java - 为什么 Java 应用程序在 Windows XP 32 和 Windows 7 64 中的内存使用有如此大的差异