JQuery appendTo не добавляет

Question

Это мой HTML:

<table id="ParamTbl"> 
<tbody> 
    <tr id="ParamRow"> 
     <td><label for="paramname[]">Name: </label><input type="text" name="paramname[]" class="paramname"></td> 
     <td><label for="paramval[]">Value: </label><input type="text" name="paramval[]"></td> 
     <td><label for="paramtype[]">Type: </label><select name="paramtype[]"> 
       <option selected="true">String</option> 
       <option>Double</option> 
       <option>Object</option> 
      </select></td> 
     <td><div id="clrList">X</div></td> 
     <td><div id="addrow">Add Param</div></td> 
    </tr> 
</tbody> 
</table> 

Это мой JQuery:

function addParam(ParamName){ 
    $('#ParamTbl').css('background-color','yellow'); 
    var clone = $('#ParamTbl').closest("tr").clone(); 
    clone.appendTo('#ParamTbl').find(":input").val(ParamName); 
    $('#ParamTbl').closest("td").remove(); 
} 

css('background-color','yellow'); для целей отладки, я имел в там несколько alerts() тоже, функция называется ok, и ParamName передается ему в порядке. Итак, вопрос: почему не добавлен мой ряд?

Answer 1

Полный редизайн

HTML

<table id="ParamTbl"> 
    <tbody> 
     <tr> 
      <td><label for="paramname[]">Name: </label><input type="text" name="paramname[]" class="paramname"/></td> 
      <td><label for="paramval[]">Value: </label><input type="text" name="paramval[]"/></td> 
      <td><label for="paramtype[]">Type: </label><select name="paramtype[]"> 
       <option selected="true">String</option> 
       <option>Double</option> 
       <option>Object</option> 
       </select></td> 
      <td><div class="clrList">X</div></td> 
      <td><div class="addrow">Add Param</div></td> 
     </tr> 
    </tbody> 
</table> 

JS

$(function(){ 
    var $table = $('#ParamTbl'); 

    $('#ParamTbl').on('click', '.addrow', function(){ 
     $table.css('background-color','yellow'); 

     var tr = $(this).closest('tr'); 

     var clone = tr.clone(); 
     clone.appendTo($table).find('input[name="paramval[]"]').val(''); 
     $(this).remove(); 
    }) 

    $('#ParamTbl').on('click', '.clrList', function(){ 
     $(this).closest('tr').remove() 
    }) 
}); 

Демо: Fiddle

Answer 2

Попробуйте изменить:

var clone = $('#ParamTbl').closest("tr").clone(); 

к:

var clone = $('#ParamTbl').find("tr#ParamRow").clone(); 

так closest() прохождения через своих предков в дереве DOM.

Answer 3

http://api.jquery.com/closest/

Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

Попробуйте find вместо:

var clone = $('#ParamTbl').find("tr:first").clone();