克隆表格行最推薦的解決方案是什麼？

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