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

admin管理员组

文章数量:1295309

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.

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.

• javascript
• jquery
• html

Share Follow edited Jan 31, 2017 at 15:02 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Jan 30, 2017 at 14:59 mymailmymail 12922 silver badges1414 bronze badges 3

• "New row" or "next row"? – Scott Marcus Commented Jan 30, 2017 at 15:01
• Where's the click event code? Please post a minimal reproducible example – j08691 Commented Jan 30, 2017 at 15:02
• What you've just posted will append all the inputs inside the TD (you're saying new row, it's not even appending it to a new column). – ibrahim mahrir Commented Jan 30, 2017 at 15:08

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

As we don't know wether trs 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.

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

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

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

First the id should be unique in the same document so better to use a mon 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./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>

本文标签： Append html string as a table row (lttrgt) via javascriptjqueryStack Overflow