javascript - 使用输入值填充和创建表

Question

我的意见:

<input id="id_name" name="name"/>
<input id="id_age" name="age"/>
<button id="add_btn"></button>

每次点击按钮后 add_btn我需要将表单输入值附加到我的表(<tr>)中。一开始， table 是空的。只有<tbody> .

<table class="mytab">
 <tbody>
    <tr>
        <td> HERE_VALUE_FROM_NAME_FIELD</td>
        <td>HERE_VALUE_FROM_AGE_FIELD</td>
    </tr>
    <tr>
        <td> HERE_NEXT_VALUE_FROM_NAME_FIELD</td>
        <td>HERE_NEXT_VALUE_FROM_AGE_FIELD</td>
    </tr>
  </tbody>
</table>           

点击函数:

$("#myform").on('click', "#add_btn", function(e) {
        e.preventDefault();
        //fill table
});

Answer 1

像这样尝试:

HTML

<input id="id_name" name="name"/>
<input id="id_age" name="age"/>
<button id="add_btn">click</button>

<table border="1" class="mytab"></table>    

JQuery:

$("#add_btn").on('click', function(e) {
    e.preventDefault();
    var name = $('#id_name').val(), 
        age = $('#id_age').val();

    $('<tr><td>'+name+'</td><td>'+age+'</td></tr>').appendTo( $('.mytab') );
});

演示

http://jsfiddle.net/jogesh_pi/dfg2R/

有用的链接: appendTo()