jquery - 克隆表单行的最推荐解决方案是什么？

Question

我正在尝试实现图像中所示的功能。

这些是我的一些问题，希望您能提出意见：

• 我应该在 div 中有一行输入然后克隆它吗？
• 表单元素的名称应该是匹配的数组（name="firselement[]"）吗？
• 如果未选择 Select，它会作为空传递还是跳过？我需要将行作为记录维护在数据库中，并且不希望丢失的输入弄乱数组顺序

非常感谢任何实现这一目标的技巧。

Answer 1

<select>将始终传递值。如果没有选择，它将选择默认的。第一个，即在某些情况下可能具有 value ''。

name="field[]"如上所述使用。然后可以简单地克隆每个字段的 HTML，您的系统会将它们识别为一个数组，输入的键和选择的每行都有相关的键。

基本上在您的系统中验证的是 select-name 为每个数组键获取了一个值。例如，您可以将数组键基于发送的文本输入的数组。

Answer 2

“我应该在 div 中有一行输入然后克隆它吗？”

好吧，那会奏效。我可能会将每个项目（行）设为 ul 中的 li 元素或表格中的 tr。我将使用委托的事件处理程序来管理“删除”处理以及字段的任何其他事件管理。

“表单元素的名称应该是匹配的数组（name="firselement[]"）吗？”

重复字段不必[]在其名称中包含方括号即可工作。我相信 put[]是 PHP 的事情，但并非所有服务器端语言都这样做（例如，如果您的服务器端是 Java，则可以将重复的请求参数名称作为数组访问，而无需[]名称中的 ）。浏览器不在乎一种或另一种方式。

“如果未选择 Select，它是作为空传递还是被跳过？我需要将行作为记录保留在 DB 中，并且不希望丢失的输入弄乱数组顺序”

如果您正在谈论一个下拉选择元素，那么首先在列表中包含一个默认/空选项 - 它的值（可以是空字符串）将包含在请求中。第一个选项实际显示给用户的文本可能是一个空字符串，或者类似“--select a value--”之类的东西。

Answer 3

在这里，我为上述查询完成了完整的解决方案箱。您可以查看演示链接，如下所示：

演示： http ://codebins.com/bin/4ldqp99

HTML：

<div id="panel">
  <form id="frm1">
    <div id="table1">
      <div class="row">
        <div class="input">
          <input type="text" size="18" name="frmtext[]"/>
        </div>
        <div class="input">
          <select name="selop1[]">
            <option value="0">
              --select--
            </option>
            <option value="1">
              option1
            </option>
            <option value="2">
              option2
            </option>
            <option value="3">
              option3
            </option>
          </select>
        </div>
        <div class="input">
          <select name="firselement[]">
            <option value="0">
              --select--
            </option>
            <option value="firselement1">
              firselement1
            </option>
            <option value="firselement2">
              firselement2
            </option>
            <option value="firselement3">
              firselement3
            </option>
          </select>
        </div>
        <div class="input">
          <a href="javascript:void(0);" class="delete">
            Delete
          </a>
        </div>

      </div>

      <div class="action">
        <a  href="javascript:void(0);" id="addrow">
          Add Row
        </a>
      </div>
    </div>
  </form>
</div>

CSS：

#table1{
  background:#22559d;
  width:500px;
  padding:10px;
}
.row{
  width:450px;
  padding:5px;
  margin-top:2px;
  border:1px solid #dcada9;
}
.input{
  display:inline-block;
  margin: 0 10px 0 10px;
}
input, select{
  border:1px solid #adada9;
}
#table1 a{
  color:#fdddda;
  text-decoration:none;
}
#table1 a:hover{
  text-decoration:underline;
}

查询：

  $(function() {
    $("#addrow").click(function() {
        $('.row:last').clone().insertAfter(".row:last");
        $('.row:last').find("a.delete").live('click', delRow);

        //Bind Delete Link Shows on Newly Added Row
        $("a.delete").live('click', delRow);

        /*--Here You can remove following scripts If you dont want to keep selected drop down option as on previous row ---  */
        $('.row:last').find("select:eq(0)").val($('.row:last').prev(".row").find("select:eq(0)").val());

        $('.row:last').find("select:eq(1)").val($('.row:last').prev(".row").find("select:eq(1)").val());
        /* --End of script for Selecting Drop down values --*/

    });

});

function delRow() {
    $(this).parents(".row").remove();
    if ($(".row").length <= 0) {
        $(".action").hide();
    }
}

演示： http ://codebins.com/bin/4ldqp99