Filling and creating table with input value

Question

My inputs:

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

After every click on button add_btn I need append my table(<tr>) with form input value. At the start, the table is empty. Only <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>

Onclick function:

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

jogesh_pi · Accepted Answer · 2014-02-27 11:16:37Z

3

Try like this:

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') );
});

DEMO

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

Helpful link: appendTo()

answered Feb 27, 2014 at 11:16

jogesh_pi

9,7745 gold badges40 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stephen Melvin Over a year ago

Why no var before age? Edit: Nevermind, I didn't notice the comma.

JoDev · Accepted Answer · 2014-02-27 11:17:36Z

0

A little search about jQuery DOM will give you the answer. see jQuery.append()

$( '#table_id' ).append(
    $('<tr />').append(
        $('<td/>').text($('#id_name').value())
    ).append(
        $('<td/>').text($('#id_age').value())
    )
);

answered Feb 27, 2014 at 11:17

JoDev

6,9231 gold badge25 silver badges37 bronze badges

Comments

Dory Zidon · Accepted Answer · 2014-02-27 11:20:24Z

0

You can use the insertRow and insertCell on the returned row.

http://jsfiddle.net/dfg2R/2/

insertCell

insertRow

Here is an example:

$("#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();
});

edited Feb 27, 2014 at 11:20

answered Feb 27, 2014 at 11:14

Dory Zidon

10.8k2 gold badges29 silver badges43 bronze badges

Comments

Ekusu · Accepted Answer · 2014-02-27 11:22:43Z

0

If you want to use jQuery you could use .append()

$(".myTab tbody").append("<tr><td>" + valueName+ "</td><td> + valueAge + </td></tr>");

answered Feb 27, 2014 at 11:22

Ekusu

1321 silver badge8 bronze badges

Collectives™ on Stack Overflow

Filling and creating table with input value

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related