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

Question

我试图实现图像中显示的功能。

这些都是我并感谢您的意见问题：

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

有关实现此操作的任何提示都非常感谢。

Answer 1

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

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

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

重复的字段不必在他们的名字中有方括号[]工作。我相信[]是一个PHP的东西，但并不是所有的服务器端语言都这样做（如果你的服务器端是Java，例如，重复的请求参数名称可以作为一个数组在名称中没有[]而被访问）。浏览器不关心其中一种方式。

“如果没有选择选择，是否得到作为空传递或跳过？我需要保持排在DB的记录，不希望有丢失的输入搞乱了阵列秩序”

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

Answer 2

<select>将始终传递值。如果没有选中，它会选择默认的。第一个是，在某些情况下可能有值''。如上所述，使用name="field[]"。然后，可以简单地克隆每个字段的HTML，并且系统会将它们标识为一个数组，输入的键和选择的键具有每行的相关键。

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

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