Reputation: 820

How to get Dynamic table row values

I have an HTML table whose rows are created when page loaded,at the end of the row there is a cross button so what I am trying to do is,when I click that button I want to have the values inside the current row, I have ItemName,I Code,Price any many more so I want some fields value when I click that button, My all the cells are in form of input fields only

What I am doing

function rowappend(tbody) {

  const markup =
    `<tr>
		  <td>
		    <input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd">
		  </td>
		  <td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
		  <td><input type="text" name="mrptd" id="mrptd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
		  <td><input type="text" name="purRatetd" id="purRatetd" class="form-control commantd"></td>
		  <td>
		    <input type="tel" id="unitQtytd"class="form-control commanChange" name="unitQtytd">
		  </td>
         			 
		  <td>
		    <input type="tel" id="discPercentagetd"class="form-control commanChange" name="discPercentagetd" value="0.00">
		  </td>
		  <td><input type="text" name="discAmttd" id="discAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td> 
		  <td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
		  <td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
		  <td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
		  <input type="hidden" name="unittd" id="unittd" class="form-control commantd">
		  <td style="background-color: white;border: 1px white"><i class="fas fa-times fa-2x remove-btn" ></i></td>
		  
		</tr>`

  $(tbody).append(markup);

}
rowappend($('tbody', '#tableInvoice'));
$(document).on("click", ".remove-btn", function(e) {
  $.confirm({
    title: '',
    content: 'Do you want to clear ?',
    buttons: {
      Yes: () => {
        keys: ['enter', 'space']
        action: function() {
          var tr = $(this).closest('tr');
          var td = tr.find("td").eq(4);
          var input = td.find('input');
          alert(input.val())
          tr.remove();
        },
      },
      No: function() {

      },

    }
  })
}) $(document).keypress(function(event) {
  const row = event.target.parentElement.parentElement

  var keycode = event.keyCode || event.which;
  if (keycode == '13') {
    if (event.target.matches('[name=discPercentagetd]')) {

      if ($(row).parent().find('tr').length - $(row).index() === 1) {
        rowappend(event.target.parentElement.parentElement.parentElement)
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
<div class="row tableGrn" id="commonDvScroll">
  <table class="table table-bordered" id="tableInvoice">
    <thead>
      <tr>
        <th id="itemNameth" class="commanth">Item Name</th>
        <th id="itemCodeth" class="commanth">I Code</th>
        <th id="mrpth" class="commanth">MRP</th>
        <th id="purRateth" class="commanth">Price</th>
        <th id="unitQtyth" class="commanth">Unit Qty</th>
        <th id="discPercentageth" class="commanth">Disc %</th>
        <th id="discAmtth" class="commanth">Disc Amt</th>
        <th id="gstPercentageth" class="commanth">GST %</th>
        <th id="gstAmtth" class="commanth">GST Amt</th>
        <th id="totalAmtth" class="commanth">Total Amt</th>

      </tr>
    </thead>
    <tbody>
    </tbody>

  </table>

</div>

Upvotes: 1

Answers (3)

Cuong Le Ngoc

Reputation: 11975

$(this) in your click function refer to the <i class="fas fa-times fa-2x remove-btn" ></i> so $(this).find('td') will return nothing. You need to use $(this).closest('tr') to get the row first.

function rowappend(tbody) {

  const markup =
    `<tr>
		  <td>
		    <input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd">
		  </td>
		  <td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
		  <td><input type="text" name="mrptd" id="mrptd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
		  <td><input type="text" name="purRatetd" id="purRatetd" class="form-control commantd"></td>
		  <td>
		    <input type="tel" id="unitQtytd"class="form-control commanChange" name="unitQtytd">
		  </td>
         			 
		  <td>
		    <input type="tel" id="discPercentagetd"class="form-control commanChange" name="discPercentagetd" value="0.00">
		  </td>
		  <td><input type="text" name="discAmttd" id="discAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td> 
		  <td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
		  <td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
		  <td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
		  <input type="hidden" name="unittd" id="unittd" class="form-control commantd">
		  <td style="background-color: white;border: 1px white"><i class="fas fa-times fa-2x remove-btn" ></i></td>
		  
		</tr>`

  $(tbody).append(markup);

}
rowappend($('tbody', '#tableInvoice'));
$(document).on("click", ".remove-btn", function(e) {
  $.confirm({
    title: '',
    content: 'Do you want to clear ?',
    buttons: {
      Yes: {
        keys: ['enter', 'space'],  
        action: () => {
        var tr = $(this).closest('tr');
        var td = tr.find("td").eq(4);
        var input = td.find('input');
        alert(input.val())
        tr.remove();
        }
      },
      No: function() {

      },

    }
  })
})
$(document).keypress(function(event) {
  const row = event.target.parentElement.parentElement

  var keycode = event.keyCode || event.which;
  if (keycode == '13') {
    if (event.target.matches('[name=discPercentagetd]')) {

      if ($(row).parent().find('tr').length - $(row).index() === 1) {
        rowappend(event.target.parentElement.parentElement.parentElement)
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<div class="row tableGrn" id="commonDvScroll">
  <table class="table table-bordered" id="tableInvoice">
    <thead>
      <tr>
        <th id="itemNameth" class="commanth">Item Name</th>
        <th id="itemCodeth" class="commanth">I Code</th>
        <th id="mrpth" class="commanth">MRP</th>
        <th id="purRateth" class="commanth">Price</th>
        <th id="unitQtyth" class="commanth">Unit Qty</th>
        <th id="discPercentageth" class="commanth">Disc %</th>
        <th id="discAmtth" class="commanth">Disc Amt</th>
        <th id="gstPercentageth" class="commanth">GST %</th>
        <th id="gstAmtth" class="commanth">GST Amt</th>
        <th id="totalAmtth" class="commanth">Total Amt</th>

      </tr>
    </thead>
    <tbody>
    </tbody>

  </table>

</div>

Upvotes: 1

Ajju Abdul Ahad

Reputation: 56

You can use onclick event for the '.remove-btn'.

   /* Adding onclick event  */
<i class="fas fa-times fa-2x remove-btn" onclick="fnRemoveRow(this);"></i>

 /*Javascript code */
 function fnRemoveRow(_this)
 {
     var $tr=$(_this).closest('tr');
     var itemName = $tr.find("#itemNametd").val();  
     /* Get other values */
      $tr.remove();
  }

Upvotes: 1

Umashankar

Reputation: 709

First, find out the parent of that cross button and then find out the value.

Make sure do not use Ids if you are creating multiple rows and do not access using the id because it should be unique and I assumed there will be more then row in this list

$('.remove-btn').click(function(e) {
/* First find out parent of X button then inside that find input element and then value.
I have added here the name while finding the perticular value you can use the id as well but it will not work  if more then 1 row.
*/
alert($(this).parent().parent().find('input[name="itemNametd"]').val())
$(this).closest('tr').remove();})}

Upvotes: 0

How to get Dynamic table row values

Answers (3)

Related Questions