0

現在、テーブルに行を挿入する作業コードがあります。次のようになります。

<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 " />');

有効な HTML のブロックではなく、jQuery を使用して同じエントリを作成するにはどうすればよいですか?

前もって感謝します！

4

2 に答える 2

0

あなたはそのようなことをすることができます：

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);
于 2012-08-02T18:53:43.853 に答える
0

それ以外の

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

あなたは出来る

.append($('<input />').attr({
    'class': 'add_next',
    'type': 'button',
    'value': ''
}));
于 2012-08-02T18:53:26.390 に答える