Javascript 使用输入值填充和创建表

Javascript 使用输入值填充和创建表,javascript,jquery,Javascript,Jquery,我的意见: <input id="id_name" name="name"/> <input id="id_age" name="age"/> <button id="add_btn"></button> Onclick函数: $("#myform").on('click', "#add_btn", function(e) { e.preventDefault(); //fill table }); 您可以在返回

我的意见:

<input id="id_name" name="name"/>
<input id="id_age" name="age"/>
<button id="add_btn"></button>
Onclick函数:

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

您可以在返回的行上使用insertRow和insertCell

以下是一个例子:

$("#myform").on('click', "#add_btn", function(e) {
        e.preventDefault();
        var table = $("table.mytab")[0]
        var newRow = table.insertRow(0);
        var newCell = newRow.insertCell();
        newCell.innerText = $("#id_name").val();
        var newCell = newRow.insertCell();
        newCell.innerText = $("#id_age").val();
});
试着这样做:

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') );
});
$(“#添加#btn”)。在('click',函数(e)上{
e、 预防默认值();
var name=$('#id_name').val(),
年龄=$('id_age').val();
$(''+姓名+''+年龄+'')。附加到($('.mytab');
});
演示

帮助链接:

对jQuery DOM进行一点搜索就可以找到答案。看

$('#表_id')。追加(
$('')。追加(
$('').text($('#id_name').value())
).附加(
$('').text($('#id_age').value())
)
);

如果要使用jQuery,可以使用

$(“.myTab tbody”).append(“+valueName+”+valueAge+”);

为什么在
年龄之前没有
var
?编辑:没关系,我没注意到逗号。
$("#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') );
});
$( '#table_id' ).append(
    $('<tr />').append(
        $('<td/>').text($('#id_name').value())
    ).append(
        $('<td/>').text($('#id_age').value())
    )
);
$(".myTab tbody").append("<tr><td>" + valueName+ "</td><td> + valueAge + </td></tr>");