How to get Dynamic table row values

Question

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>

Cuong Le Ngoc · Accepted Answer · 2019-07-11 13:01:13Z

1

$(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>

edited Jul 11, 2019 at 13:01

answered Jul 11, 2019 at 7:17

Cuong Le Ngoc

12k2 gold badges23 silver badges43 bronze badges

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

6 Comments

manish thakur Over a year ago

hey can you help me out I have a small doubt regarding this question

Cuong Le Ngoc Over a year ago

Yes. What's your problem?

manish thakur Over a year ago

hey I have edited my post what I am doing is when I click on cross button I am trying to as user if he/she wants to delete or not for that I am using jquery confer.min.js but after using along this the values are showing up undefined

Cuong Le Ngoc Over a year ago

i editted my answer to solve your problem. When you use Yes: function() {, the this inside this funtion is not the button anymore. You should use arrow function instead Yes: () => {

Cuong Le Ngoc Over a year ago

check the answer again, look like you have syntax error somewhere. Note that if using this then be careful when use function() inside your function.

|

Ajju Abdul Ahad · Accepted Answer · 2019-07-11 07:29:12Z

1

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();
  }

edited Jul 11, 2019 at 7:29

answered Jul 11, 2019 at 7:16

Ajju Abdul Ahad

564 bronze badges

Comments

Umashankar · Accepted Answer · 2019-07-11 07:21:40Z

0

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();})}

answered Jul 11, 2019 at 7:21

Umashankar

7077 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to get Dynamic table row values

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related