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

我试图实现图中所示的功能

以下是我提出的一些问题，希望您能发表意见：

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

非常感谢实现这一点的任何提示。

将始终传递值。如果未选择任何选项，它将选择默认选项。第一个是，在某些情况下可能具有值

'

使用前面提到的

name=“field[]”

。然后可以简单地克隆每个字段的HTML，您的系统将它们标识为一个数组，输入和选择的键对每一行都有相关的键

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

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

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

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

重复字段的名称中不必有方括号

[]

，即可工作。我相信放置

[]

是PHP的事情，但并非所有服务器端语言都这样做（例如，如果服务器端是Java，则重复的请求参数名称可以作为一个数组访问，而名称中没有

[]

）。浏览器不在乎这种或那种方式

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

---

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

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

演示：

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>

#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();
    }
}

JQuery:

<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>

#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();
    }
}

$（函数（）{
$（“#添加行”）。单击（函数（）{
$（'.row:last'）.clone（）.insertAfter（“.row:last”）；
$（'.row:last'）.find（“a.delete”）.live（'click'，delRow）；
//绑定删除链接显示在新添加的行上
$（“a.delete”）.live（'click'，delRow）；
/*--如果您不想像前一行一样保留选定的下拉选项，您可以在此处删除以下脚本--*/
$（'.row:last'）.find（$（'.row:last'）.val（$（'.row:last'）.prev（.row”）.find（$选择：eq（0）”）.val（）；
$（'.row:last'）.find（$（'.row:last'））.val（$（'.row:last'）.prev（.row”）.find（$select:eq（1）”）.val（）；
/*--用于选择下拉值的脚本结束--*/
});
});
函数delRow（）{
$（this.parents（“.row”）.remove（）；
如果（$（“.row”）。长度