动态添加一个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的表行，然后在每个新行中添加自动填充选择框

回答

相关问题