Question

Example mockup of what I am intending to achieve

我正在努力实现图片中所示的功能。

这些是我的一些问题，非常感谢您的意见：

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

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

Answer 1

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

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

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

Answer 2

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

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

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

重复字段不必在其名称中使用方括号[]。我认为将[]置于PHP之类，但并非所有服务器端语言都这样做（例如，如果您的服务器端是Java，则重复的请求参数名称可以作为没有{{1 }} 在名字里）。浏览器不关心这种或那种方式。

“如果没有选择Select，它是否被传递为空或跳过？我需要将行保存为数据库中的记录，并且不希望丢失输入使数组顺序混乱”

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

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

<强> JQuery的：

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

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

3 个答案: