Append html string as a table row (<tr>) via javascript-jquery

Question

I'm trying to append an HTML string to

var field = '<input type="text" name="featureName" class="form-control" id="featureName" placeholder="Feature Name" value="">'
var jfield = $(field);
$('#featureContainer').append(jfield);

When the button is clicked it will crete a input field, but if I click again it creates the input in the same row. How can I make a new row with the input in it?

The following is my HTML code

<tr>
    <td id="featureContainer"></td>
</tr>

If I click the button for the second time it creates it in the same row. I want it to create it in new row.

Answer 1

As we don't know wether tr s are wrapped inside table or tbody , .... We have to look for the closest tr and then get its parent then append a new row to that parent.

So, you should replace this:

$('#featureContainer').append(jfield);

with:

$('#featureContainer').closest('tr').parent().append('<tr><td>' + field + '</td></tr>');

NOTE: that inside field you have a static ID which will be on all the inputs you spawn which will be wrong since IDs are unique. So you may want to assign diferent IDs for diferent inputs.

Answer 2

You can just add the html code into field variable, like below:

var field = "<tr><td id="featureContainer"><input type="text" name="featureName" class="form-control" id="featureName" placeholder="Feature Name" value=""></td>
</tr>"
var jfield = $(field);

Assuming there is a button with id = 'add' and a table with id='data' , then you can add this after above code:

$('#add').click(function(){
    $('#data').append(jfield);
});

Answer 3

Your on the right track. But you don't need the jfield.

this appends the value of 'field' inside the td element:

$('#featureContainer').append(field);

but what you want is to append inside the table. So give your table a id (or the tbody) and do the following:

You need to embed the field inside a <tr><td> section and append that as a whole.

var field = var field = '<tr><td><input type="text" name="featureName" class="form-control" id="featureName" placeholder="Feature Name" value=""></td></tr>';

then in the click event:

$('#tableid').append(field);

Answer 4

First the id should be unique in the same document so better to use a common classes instead, then you could use append() to add new row (including tr/td ), check the example below.

Hope this helps.

 $('#add-row').on('click', function(){ var field = '<input type="text" name="featureName" class="form-control" placeholder="Feature Name" value="">' $('table').append('<tr><td>'+field+'</td></tr>'); console.log($('table tr').length+' rows'); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>Default row</td> </tr> </table> <button id='add-row'>Add row</button> 

Answer 5

Thr issue with your code is that you are trying to append to an element using id selector. Since in a valid html there should be only a single element with an unique id, you will be appending the new element always to the same td#featureContainer .

I will suggest you to change the id to class. To select the td.featureContainer where you need to append the new element, you can check inside the clicked button element event handler and find the td.featureContainer

 $(".feature").on("click", function() { var field = '<input type="text" name="featureName" class="form-control" id="featureName" placeholder="Feature Name" value="">' var jfield = $(field); $(this).parent().prev(".featureContainer").append(jfield); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <table> <tr> <td class="featureContainer"></td> <td> <input type="button" class="feature" value="click for row one"> </td> </tr> <tr> <td class="featureContainer"></td> <td> <input type="button" class="feature" value="click for row two"> </td> </tr> </table>