Question

我目前有工作代码将行插入到表中。它看起来像这样：

<script type= "text/javascript"> 
$(document).ready(function() { 
    var new_row = '<td><input type="text" value="Type question here" /></td><td><input type="button"class="add_next" value=" + " /><input type="button" class="move_up" value="^" /><input type="button" class="move_down" value=" v " /><input type="button" class="remove" value=" x " /></td>'; 

    var q_num = 2; // question number 

    $('.add_next').click(function() { 

     console.log(this); 

     console.log(($('<tr>')).insertAfter($(this).closest('tr')) 
        .attr('id', 'Q'+q_num) 
        .attr('name', 'Q'+q_num) 
        .append(new_row) 

      ); 
     q_num++; 

    }); 
}); 
</script> 

我的问题在这里，变量new_row是丑陋的。我想用$ .append（$（''）），.attr（）和其他jQuery函数来创建这一行，但我还没有想出一个办法。我能想到的最好的是这样的：

($('<tr>')).insertAfter($(this).closest('tr')) 
        .append($('<td>')) 
         .append('<input type="text" value="Type question here" />') 
        .append($('<td>')) 
         .append('<input type="button"class="add_next" value=" + " />') 
         .append('<input type="button" class="move_up" value="^" />') 
         .append('<input type="button" class="move_down" value=" v " />') 
         .append('<input type="button" class="remove" value=" x " />'); 

如何使用jQuery而不是有效的HTML块做同样的条目？

在此先感谢！

Answer 1

你可以做这样的事情：

var new_row = $('<tr/>',{'id':'Q'+q_num,'name':'Q'+q_num}).append(
    $('<td/>').append(
     $('<input/>',{'type':'text','value':'Type question here'}) 
    ), 
    $('<td/>').append(
     $('<input/>',{'type':'button','value':' + ','class':'add_next'}), 
     $('<input/>',{'type':'button','value':'^','class':'move_up'}), 
     $('<input/>',{'type':'button','value':' v ','class':'move_down'}), 
     $('<input/>',{'type':'button','value':' x ','class':'remove'}) 
    ), 
); 

然后改变你插入代码：

$(this).closest('tr').after(new_row); 

Answer 2

而不是

.append('<input type="button"class="add_next" value=" + " />') 

你可以

.append($('<input />').attr({ 
    'class': 'add_next', 
    'type': 'button', 
    'value': '' 
}));