Question

I have two tables one with an add button and one without an add button. How can I take the data I enter into the row with the add button and get it to appear in the other table? For example if I fill in 1,2,3 etc. and click add the table will be updated to row 1 having 5,4,6. row 2 having 1,2,3. and then if I add a third row it would go underneath row 2.

Here is an example of what I have so far:

http://jsfiddle.net/r8yXp/4/

I just am not sure how to get the data from the input fields into the table above when the add button is clicked.

Answer 1

A slightly simplified answer but you can use this one as a basis for what you’re trying to do:

Name:​<input type="text" id="name">
<input type="button" id="add" value="add"/>
<br/>
<table border="1">
    <tr>
    </th>Name</th>
    </tr>
    <tbody id="root"></tbody>
</table>
<script>
    $('#add').click(function(){
    var name = $('#name').val(); //get value from text field
    var root = $('#root'); //this is where you will attached the new row
    var tr = $("<tr>"); //the new row
    var td = $("<td>").text(name); //use text from textfield as the text for the new table row
    td.appendTo(tr);
    tr.appendTo(root);
    });
</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Here’s the link to the fiddle: http://jsfiddle.net/jrPxr/

To generate inputs:

var input = $("<input>").attr({"type" : "text", "id" : "someID"}).val(name);

Then just append it to its direct parent. In this case the table definition:

input.appendTo(td);

You can just change the type to whatever input you want(radio, checkbox,etc..)