CODEWITHSUNDEEP
javascriptjquery
Noob Player
Noob Player

Reputation: 289

Unable to add new row in table dynamically

I am trying to add new row in table on user side. I have done it, but it enters new row only first time, when you clicks on add row button second time, nothing happens.

function insTableRow(tableID) {
  var x = document.getElementById(tableID);
  var get_row = x.rows[2];
  get_row.style.display = '';
  console.log(get_row);
  $("#" + tableID + " tbody").append(get_row);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i id="add" class="fa fa-plus-circle fa-2x fa-fw" onclick="insTableRow('educationTable')"></i>
<table class="table table-responsive table-bordered order-list" id="educationTable">
  <thead>
    <tr>
      <th>Institute Name</th>
      <th>Qualification</th>
      <th>Admission Date</th>
      <th>Graduation Date</th>
      <th>Degree Scanned Image</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td></td>
    </tr>
    <tr style="display:none;">
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><i id="add" class="fa fa-minus-circle fa-2x fa-fw" onclick="delTableRow('educationTable')"></i></td>
    </tr>
  </tbody>
</table>

Working jsfiddle

any idea, why its not appending new row on second time ?

Upvotes: 1

Views: 291

Answers (2)

Sankar
Sankar

Reputation: 7107

How about this...

Clone your Initial row to create new rows, rather than showing the display:none rows

function insTableRow(tableID) {
  var x = document.getElementById(tableID);
  var get_row = $(x.rows[1]).clone();
  $("#" + tableID + " tbody").append(get_row);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i id="add" class="fa fa-plus-circle fa-2x fa-fw" onclick="insTableRow('educationTable')"></i>
<table class="table table-responsive table-bordered order-list" id="educationTable">
  <thead>
    <tr>
      <th>Institute Name</th>
      <th>Qualification</th>
      <th>Admission Date</th>
      <th>Graduation Date</th>
      <th>Degree Scanned Image</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td></td>
    </tr>

  </tbody>
</table>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

Your issue is because you're selecting the same row and appending it on every click. You're not creating a new row. To fix this you can clone the row and append that new instance.

Also note that you should avoid using outdated on* event handlers in your HTML. As you've already included jQuery in the page you can use that to attach your events outside the HTML. In addition you can use a delegated event handler on the delete icon to remove the clicked row. Try this:

$('#add').click(function() {
  var $row = $('#educationTable').find('tr:last');
  $row.clone().insertBefore($row).show();
});

$('#educationTable').on('click', '.delete', function() {
  $(this).closest('tr').remove();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i id="add" class="fa fa-plus-circle fa-2x fa-fw"></i>
<table class="table table-responsive table-bordered order-list" id="educationTable">
  <thead>
    <tr>
      <th>Institute Name</th>
      <th>Qualification</th>
      <th>Admission Date</th>
      <th>Graduation Date</th>
      <th>Degree Scanned Image</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td></td>
    </tr>
    <tr style="display:none;">
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><i class="delete fa fa-minus-circle fa-2x fa-fw"></i></td>
    </tr>
  </tbody>
</table>

Also note that I removed the repeated id="number" as it's invalid HTML to repeat the same id attribute across multiple elements. Use a class for that instead.

Upvotes: 5

Related Questions