Happydevdays Happydevdays - 28 days ago 8
HTML Question

Trying to add rows to a table dynamically is failing

I am trying to provide a way for the users of my web application to be able to dynamically add more first / last name fields to a form that needs to be filled out as a part of a create widget type page.

Problem

The code works in that it creates a new set of first/last name fields, but it appends it in the wrong spot... it puts it at the top of the form instead of under the first set of first/last name fields.

Code:

This is what the HTML table looks like:

<table class="table table-bordered table-hover">
<tr><td colspan="3"><input class="form-control" type="input" placeholder="Location" name="location" /></td></tr>
<tr><td colspan="3"><input class="form-control" type="input" placeholder="Department" name="department" /></td></tr>
<div id='listofnames'>
<tr>
<td><input class="form-control" type="input" placeholder="First Name" name="fname" /></td>
<td><input class="form-control" type="input" placeholder="Last Name" name="Lname" /></td>
<td><button id='addname' type="button" class="btn btn-info btn-circle"><i class="fa fa-plus"></i></button></td>
</tr>
</div>
<tr><td colspan="3"><input type="submit" name="submit" class="btn btn-primary" value="Assign" /></td></tr>
</table>


The you see is my attempt to isolate the area where I want to add new rows.

When the user clicks on the "addname" button, I have the following code execute:

$( "#addname" ).click(function() {

htmlstring ="<tr>";
htmlstring += "<td><input class='form-control' type='input' placeholder='First Name' name='fname' /></td>";
htmlstring += "<td><input class='form-control' type='input' placeholder='Last Name' name='lname' /></td>";
htmlstring += "</tr>";
$( "#listofnames" ).append(htmlstring);

});


Can you tell me what I'm doing wrong?

Using the
.before()
method I changed this:

$( "#listofnames" ).append(htmlstring);


to this:

$( "#assign" ).before(htmlstring);


where "assign" is now the id of the button that triggers this all.
Got the idea from the answer that suggested
.after()

Answer

I think you are looking something like this:

$("#addname").click(function() {

  htmlstring = "<tr>";
  htmlstring += "<td><input class='form-control' type='input' placeholder='First Name' name='fname' /></td>";
  htmlstring += "<td><input class='form-control' type='input' placeholder='Last Name' name='lname' /></td>";
  htmlstring += "</tr>";
  $("#listofnames").after(htmlstring);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
  <tr>
    <td colspan="3">
      <input class="form-control" type="input" placeholder="Location" name="location" />
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <input class="form-control" type="input" placeholder="Department" name="department" />
    </td>
  </tr>
    <tr id='listofnames'>
      <td>
        <input class="form-control" type="input" placeholder="First Name" name="fname" />
      </td>
      <td>
        <input class="form-control" type="input" placeholder="Last Name" name="Lname" />
      </td>
      <td>
        <button id='addname' type="button" class="btn btn-info btn-circle">append</button>
      </td>
    </tr>
  <tr>
    <td colspan="3">
      <input type="submit" name="submit" class="btn btn-primary" value="Assign" />
    </td>
  </tr>
</table>

Comments