Add row in table dynamically - Bootstrap & JS

Question

I need help with my code. How do I add the index number whenever the user clicks the add button and how should I insert text input just like the first row? I am still learning how to use JS. Thank you in advance!

function childrenRow() {
  var table = document.getElementById("childTable");
  var row = table.insertRow(2);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);
  var cell5 = row.insertCell(4);
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<table class="table table-bordered" id="childTable">
  <thead class="table-info">
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Name</th>
      <th scope="col">School / University </th>
      <th scope="col">Year</th>
      <th scope="col">Age</th>
      <th scope=""></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td class="col-sm-4">
        <input type="text" name="name" class="form-control" />
      </td>
      <td>
        <input type="text" name="school" class="form-control" />
      </td>
      <td class="col-sm-2">
        <input type="text" name="year" class="form-control" />
      </td>
      <td class="col-sm-2">
        <input type="text" name="age" class="form-control" />
      </td>
      <td>
        <input type="button" class="btn btn-block btn-default" id="addrow" onclick="childrenRow()" value="+" />
      </td>
    </tr>
  </tbody>
</table>

Rajen Trivedi · Accepted Answer · 2021-05-17 09:39:28Z

Check this code.....

var i = 1;
function childrenRow() {
  i++;
  $('#childTable').find('tbody').append('<tr><th scope="row">'+i+'</th><td class="col-sm-4"><input type="text" name="name" class="form-control" /></td><td><input type="text" name="school" class="form-control" /></td><td class="col-sm-2"><input type="text" name="year" class="form-control" /></td><td class="col-sm-2"><input type="text" name="age" class="form-control" /></td><td><input type="button" class="btn btn-block btn-default" id="addrow" onclick="childrenRow()" value="+" /></td></tr>');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<table class="table table-bordered" id="childTable">
  <thead class="table-info">
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Name</th>
      <th scope="col">School / University </th>
      <th scope="col">Year</th>
      <th scope="col">Age</th>
      <th scope=""></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td class="col-sm-4">
        <input type="text" name="name" class="form-control" />
      </td>
      <td>
        <input type="text" name="school" class="form-control" />
      </td>
      <td class="col-sm-2">
        <input type="text" name="year" class="form-control" />
      </td>
      <td class="col-sm-2">
        <input type="text" name="age" class="form-control" />
      </td>
      <td>
        <input type="button" class="btn btn-block btn-default" id="addrow" onclick="childrenRow()" value="+" />
      </td>
    </tr>
  </tbody>
</table>

I've edited few lines you gave so that the + button won't appear for each row. Thank you for your help! :D

Gopi krishna · Accepted Answer · 2021-05-17 10:16:38Z

1

Replace your function with the below function

 function deleteRow(id)
{
document.getElementById(id).remove()
}

function childrenRow() {

  var table = document.getElementById("childTable");
  // GET TOTAL NUMBER OF ROWS 
  var x =table.rows.length;
  var id = "tbl"+x;
  var row = table.insertRow(x);
  row.id=id;
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);
  var cell5 = row.insertCell(4);
  var cell6 = row.insertCell(5);
  cell1.outerHTML = `<th> ${x}</th>`;
  cell2.innerHTML = ' <input type="text" name="name" class="form-control" />';
  cell3.innerHTML = ' <input type="text" name="school" class="form-control" />';
  cell4.innerHTML = ' <input type="text" name="year" class="form-control" />';
  cell5.innerHTML = ' <input type="text" name="age" class="form-control" />';
  cell6.innerHTML = '  <input type="button" class="btn btn-block btn-default" id="addrow" onclick="deleteRow(\''+id+'\')" value="Delete" /> '; 
}

edited May 17, 2021 at 10:16

answered May 17, 2021 at 9:37

Gopi krishna

3551 silver badge13 bronze badges

8 Comments

spaceba Over a year ago

Thank you, it works! By any chance, is it possible whenever the new row being added, delete row automatically replace the add button?

Gopi krishna Over a year ago

@spaceba, Can you please elaborate, as per my understanding you want add button to the last row and delete button for all the other rows !!!

spaceba Over a year ago

Sorry, what I mean is when the user clicks the add button, the new row will automatically appear a delete button on right side so they can delete the new row if they want.

Gopi krishna Over a year ago

OK, got you, modifying the answer according to it, you can check now !!!

spaceba Over a year ago

It does appear now, but the row cannot be deleted when user clicks the button?

|

Collectives™ on Stack Overflow

Add row in table dynamically - Bootstrap & JS

2 Answers 2

1 Comment

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related