動態添加一個jQuery的錶行，然後在每個新行中添加自動填充選擇框

嘿，夥計們，我昨天試着問這個問題，但我沒有清楚地解釋我自己，也沒有解釋清楚。動態添加一個jQuery的錶行，然後在每個新行中添加自動填充選擇框

我有一個設置在表中的窗體。用戶可以隨意添加新行（以及更多表單元素）。這個表格的每一行都需要有自己獨立的選擇框和相應的子類別選擇框。

所以基本上...

名稱|選擇
xxxxxx | [類別選擇] [子類別選擇]
xxxxxx | [類別選擇] [子類別選擇]
xxxxxx | [類別選擇] [子類別選擇]

你明白了。 :)

現在任何添加的行都有自動填充的損壞版本。

有關如何使此工作的任何建議？

這是自動填充代碼，並添加我使用的表格行代碼，如果這有助於架設任何人的大腦。如果有人有他們認爲更好的答案，我會很樂意取消一切。

解決方案中可以添加/刪除表格行的免費cookie。 :)

// auto populate select code 

$(document).ready(function(){ 
      $("#selectionresult").hide(); 

      $("#selection").change(function() { 
       $("#selectionresult").hide(); 
       $("#result").html("Retrieving ..."); 
       $.ajax({ 
        type: "POST", 
        data: "data=" + $(this).val(), 
        url: "include/javascript_population.php", 
        success: function(msg){ 
         if (msg != ""){ 
          $("#selectionresult").html(msg).show(); 
          $("#result").html(""); 
         } 
         else{ 
          $("#result").html("<em>No item result</em>"); 
         } 
        } 
       }); 
      }); 
     }); 


// add table row code 

    $(document).ready(function() { 
     $("#add").click(function() { 
      $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last'); 

      return false; 
     }); 
    }); 

    $("#mytable tbody>tr:last").each(function() {this.reset();});

任何幫助將完全讚賞大家。提前致謝。 :)

來源

2010-07-30 Dylan

您可能會遇到ID衝突和事件綁定的問題。嘗試使用live（）;

當你克隆和移動DOM元素時，你的事件會被解除綁定。

試試這個：

$("#add").live("click", function() { 
$("#selection").live("change", function() {

而且它看起來像你可能會重複的ID。檢查並確保#selection，#selectionresult等不被克隆。

來源

2010-07-30 16:41:23 nicholasklick

非常感謝你的迴應！我仍然有點困惑（當談到jQuery和JS時，我很無用）。如何更改不同元素的ID？ :) – Dylan 2010-07-30 17:13:28

使用類而不是id的如此.selection等。當你做你的選擇和插入時使用jquery選擇器attrs如：after，：before，：hidden等克隆你需要的確切tr並將其插入到正確的位置。 – nicholasklick 2010-07-30 17:18:18

很酷，謝謝尼古拉斯！ – Dylan 2010-07-30 17:19:45

動態添加一個jQuery的錶行，然後在每個新行中添加自動填充選擇框

回答

相關問題