我如何添加一行到HTML表单

How can I add a row to an HTML form?

本文关键字：一行 HTML 表单 添加 何添加      更新时间：2023-09-26

我正在制作一个简单的应用程序，其中有一系列下拉框或文本框。一旦用户填写了这些内容，结果字符串就会被连接起来并显示给用户。现在我需要一个简单的函数，用户可以按下"+"按钮并添加一行。理想情况下，我需要复制上面的行(包括输入)。例如:

dropdown textbox textbox dropdown

concatenated string

我如何简单地复制上面的行(减去连接的字符串)，包括用户输入的内容。如果现在简单地添加上面的行就好了。我用的是JavaScript…下面是一个表单的代码，例如:

<form action="">
  <input type="text" id="site" value="Site" title="Site" onfocus="clickclear(this, 'Site')" onblur="clickrecall(this,'Site')" />
  <input type="text" id="placementdesc" value="Placement description" title="Placement description" onfocus="clickclear(this, 'Placement description')" onblur="clickrecall(this,'Placement description')" />
  <input type="text" id="placementtype" value="Placement Type" title="Placement Type" onfocus="clickclear(this, 'Placement Type')" onblur="clickrecall(this,'Placement Type')" />
  <input type="text" id="size" value="Size" title="Size" onfocus="clickclear(this, 'Size')" onblur="clickrecall(this,'Size')" />
  <input type="text" id="pricing" value="Pricing" title="Pricing" onfocus="clickclear(this, 'Pricing')" onblur="clickrecall(this,'Pricing')" />
  <select id="servetype" title="Serve Type">
    <option>STD – Standard trafficking type</option>
    <option>SSV – Site-served</option>
    <option>PIX – Pixel</option>
    <option>CCD – Click command</option>
    <option>PCC – Pixel and Click command</option>
    <option>RMV – Rich Media Video</option>
    <option>RME – Rich Media Expand</option>
    <option>RMO – Rich Media Other</option>
  </select>
</form>

这是简单的还是我需要使用DOM和使用createElement等?如果在表格中完成会更容易吗?

只是为了清楚，我试图不使用JQuery…如果这样做更容易的话，我愿意改变。

在每个输入旁边添加加号按钮，并给它们一个类addRow(例如)。

将函数映射到.addRow的点击事件:

$(".addRow").click(function(){
    $(this)
        .prev("input") // select the previous input element
        .clone() // clone said element
        .appendTo("#formID"); // append the clone to the form
});

请记住，这也将克隆输入的现有值，因此您可能希望在附加它之前使用val()清除克隆的值。

相关文章：