Javascript - Adding dynamic tables rows

Question

I'm trying to create a dynamic table row with a click of a button. The problem is the first row gets added perfectly, but one after that starts getting nested inside the original row added.

HTML Code

<tr class="txtMult" id="addresses"></tr>

<a href="#" id="add" class="btn btn-success">+</a>

JS

<script>
  var count=2;
  $("#add").click(function(){
    var html="<td><div class='form-group'><input type='text' class='form-control' name='Jobitems["+count+"][type]' required></div></td><td><div class='form-group'><input type='text' class='form-control' name='Jobitems["+count+"][description]' required></div></td><td><div class='form-group'><input type='text' class='form-control' name='Jobitems["+count+"][qty]' required></div></td><td><div class='form-group'><input type='text' class='form-control' name='Jobitems["+count+"][unit_price]' required></div></td><td><div class='form-group'><input type='text' class='form-control' name='Jobitems["+count+"][sub_total]' required readonly></div></td>";

    $("#addresses").append(html);
    count++;
  });
</script>

Am i doing something wrong? Or is my logic broken?

For Reference - Final Output

You're not adding a new row. You're adding new columns to an existing row. Write the HTML for an entire row and append that to the table's body. — Titus
– Titus, Commented Mar 11, 2018 at 8:03
@Titus issue is even if i put <tr> inside the script the issue still occurs. Is there a way i can change the <tr class="txtMult" id="addresses"></tr> code without affecting the entire table? Because adding div's or span's doesn't work :S — Kasun Wijesekara
– Kasun Wijesekara, Commented Mar 11, 2018 at 8:06

Ignacio · Accepted Answer · 2018-03-11 08:09:15Z

1

You're appending everything to a single tr, so everything will be in one row. You need to wrap your inserted td with a tr and append to maybe a tbody.

<table>
  <thead>
    etc...
  </thead>
  <tbody id="addresses">
  </tbody>
</table>


<a href="#" id="add" class="btn btn-success">+</a>

<script>
  var count=2;
  $("#add").click(function(){
    var html="<tr><td><div class='form-group'><input type='text' class='form-control' name='Jobitems["+count+"][type]' required></div></td><td><div class='form-group'><input type='text' class='form-control' name='Jobitems["+count+"][description]' required></div></td><td><div class='form-group'><input type='text' class='form-control' name='Jobitems["+count+"][qty]' required></div></td><td><div class='form-group'><input type='text' class='form-control' name='Jobitems["+count+"][unit_price]' required></div></td><td><div class='form-group'><input type='text' class='form-control' name='Jobitems["+count+"][sub_total]' required readonly></div></td></tr>";
    $("#addresses").append(html);
    count++;
  });
</script>

edited Mar 11, 2018 at 8:09

answered Mar 11, 2018 at 8:05

Ignacio

1,0568 silver badges17 bronze badges

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

4 Comments

Kasun Wijesekara Over a year ago

So you're suggesting have multiple <tr class="txtMult" id="addresses"></tr> tags?

Kasun Wijesekara Over a year ago

Because i want the tr's to continue without creating another table here.

Ignacio Over a year ago

@KasunWijesekara TR's are just rows on the same table, you should have multiple TR;s

Kasun Wijesekara Over a year ago

Thanks this method works. Needs a bit of css touch ups :) Thanks!

Majid Fouladpour · Accepted Answer · 2018-03-11 08:07:44Z

1

Firstly, your added element should be a tr, Secondly, you should add it to the tbody, so we select the parent of the tr:

<script>
  var count=2;
  $("#add").click(function(){
    var html="<tr>... your old tds here ...</tr>";

    $("#addresses").parents("tbody").append(html);
    count++;
  });
</script>

answered Mar 11, 2018 at 8:07

Majid Fouladpour

30.4k21 gold badges80 silver badges129 bronze badges

Comments

Ankit Singh · Accepted Answer · 2018-03-11 08:08:29Z

1

didn't get your question but I think this could be your answer

function myFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";
}

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>

<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<br>

<button onclick="myFunction()">Try it</button>



</body>
</html>

answered Mar 11, 2018 at 8:08

Ankit Singh

1832 silver badges19 bronze badges

2 Comments

Kasun Wijesekara Over a year ago

Yea this is the way, I'll try this out and see.

Kasun Wijesekara Over a year ago

Yea this is another alternative method! Thanks :) works!

Collectives™ on Stack Overflow

Javascript - Adding dynamic tables rows

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related