Javascript use dom to add data to a table

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.

Wern Ancheta · Accepted Answer · 2012-10-13 04:44:06Z

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..)

edited Oct 13, 2012 at 4:44

answered Oct 13, 2012 at 3:57

Wern Ancheta

23.4k38 gold badges105 silver badges142 bronze badges

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

6 Comments

billy Over a year ago

How do I place the inputs into a table too? so that it would be <table><tr><th>Name</th></tr><td><input /></td></table>

Wern Ancheta Over a year ago

I've updated the answer. Basically you just have to generate an input field and supply the value from user input.

billy Over a year ago

how can I have both of them in a table? the data being typed in with the add button and the data that is being added. so that there would be two tables

billy Over a year ago

like this: <table><tr><td>Name:<input type="text" id="name"> <input type="button" id="add" value="add"/></td></tr></table> <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>

billy Over a year ago

How do you get the value of the radio button from the add row to the copied row?

|

Collectives™ on Stack Overflow

Javascript use dom to add data to a table

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related