How to Get Dynamically Generated Table Td Input Value

how to get dynamically generated table td input value

You could try doing something like this:

window.onload = ()=>{  let targetTable = document.getElementById('target-table');  let targetTableRows = targetTable.rows;  let tableHeaders = targetTableRows[0];    // start from the second row as the first one only contains the table's headers  for(let i = 1; i < targetTableRows.length; i++){    // loop over the contents of each row    for(let j = 0; j < targetTableRows[i].cells.length; j++){      // something we could use to identify a given item      let currColumn = tableHeaders.cells[j].innerHTML;      // the current <td> element      let currData = targetTableRows[i].cells[j];      // the input field in the row      let currDataInput = currData.querySelector('input');            // is the current <td> element containing an input field? print its value.      // Otherwise, print whatever is insside      currDataInput ? console.log(`${currColumn}: ${currDataInput.value}`)         : console.log(`${currColumn}: ${currData.innerHTML}`);     }  }  };

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script><table class="table" id="target-table">  <thead>    <tr>      <th scope="col">Person #</th>      <th scope="col">First</th>      <th scope="col">Last</th>      <th scope="col">Handle</th>      <th scope="col">Quantity</th>      <th scope="col">Price</th>          </tr>  </thead>  <tbody>    <tr>      <th scope="row">1</th>      <td>Mark</td>      <td>Otto</td>      <td>@mdo</td>      <td><input type="text" value="01-quantity" id="value-01"></td>      <td><input type="text" value="01-price" id="value-01-2"></td>          </tr>    <tr>      <th scope="row">2</th>      <td>Jacob</td>      <td>Thornton</td>      <td>@fat</td>      <td><input type="text" value="02-quantity" id="value-02"></td>      <td><input type="text" value="02-price" id="value-02-2"></td>          </tr>    <tr>      <th scope="row">3</th>      <td>Larry</td>      <td>the Bird</td>      <td>@twitter</td>      <td><input type="text" value="03-quantity" id="value-03"></td>      <td><input type="text" value="03-price" id="value-03-2"></td>         </tr>  </tbody></table>

Getting text values from dynamic HTML table

row.cells[j] is a TD Element, not an Input element.

By doing console.log(row.cells[j]) it's the easiest way to detect what is actually hold by some property. Then, having that element all it takes is to query for a child element Input. const EL_input = row.cells[j].querySelector("input"). Now that you have your input Element: const value = EL_input.value

Don't overuse ID selectors. Specially not in a table. It makes no sense for columns to contain elements with IDs, you might either run into a duplicated IDs issue or actually you don't necessarily need a Table.
Use NodeList.prototype.forEach(). It's simpler and easier than using daunting for loops.
You could also create some nifty DOM helpers to ease on your self Querying the DOM for elements
Use .console.log() or debugger to test your code.

// DOM helpers:

const EL = (sel, par) => (par || document).querySelector(sel);
const ELS = (sel, par) => (par || document).querySelectorAll(sel);

// Task:

const getTableValues = () => { 

  let str = "";

  ELS("#dataTable tbody tr").forEach(EL_tr => {
    ELS("td", EL_tr).forEach(EL_td => {
      str += EL("input", EL_td).value + "%";
    });
    str += "@";
  });
  
  EL("#drawingsHidden").value = str
};

EL("#test").addEventListener("click", getTableValues);

#dataTable {
  width: 100%;
}

<table id=dataTable>
  <thead>
    <tr>
      <th>Check Box</th>
      <th>CAGE</th>
      <th>Dwg #</th>
      <th>Dwg Rev</th>
      <th>Prop Rev</th>
      <th>Issued Rev</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type=checkbox></td>
      <td><input type=text maxlength=5></td>
      <td><input type=text maxlength=20></td>
      <td><input type=text maxlength=2></td>
      <td><input type=text maxlength=2></td>
      <td><input type=text maxlength=2></td>
      <td><input type=text maxlength=20></td>
    </tr>
  </tbody>
</table>

<button id=test type=button>CLICK TO TEST</button><br>
<input id=drawingsHidden type=text>

how to get input value of dynamically generated input field

Use Jquery Form Data:

    $('#myform').serializeArray(); 
   // this method fetch all form data in array of key and value

function postitem(){var data=$('#myform').serializeArray();console.log(data);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <form id="myform"><tr class="tr-shadow">           <td class="desc">                                <span class="block ">                  ${Name}               </span>           </td>         <td class="desc">          <input class="au-input au-input--sm" id="qty" type="text" name="searchqty" placeholder="i.e. 20 EA" style="width: 100px;" />
            <a>UI</a>        </td>       <td class="desc">       <input class="au-input au-input--sm" id="price"  type="text" name="searchprice" placeholder="i.e 900" style="width: 90px;" />       </td>       <td>          <span class="status--process">          <input class="au-input au-input--sm" type="text" name="searchreports" placeholder="Search for datas & reports..." style="width: 90px;" />          </span>                                   </td>      <td class="desc">      <input class="au-input au-input--sm" type="text" name="searchdatas" placeholder="Search for datas & reports..." style="width: 90px;"  />       </td>       <td>                                     <button type="button" class="btn btn-primary btn-md" onclick="postitem();">Submit</button>                                         </td> </tr>   </form>

How to get text of TD in jquery on dynamically generated table in mvc4?

try this

$(".rowid").each(function() {
        var a = $(this).find(".user").html();
        alert(a);
    });

if you are looking for value of input then

        $(".rowid").each(function () {
            var a = $(this).find(".user input").val();
            alert(a);
        });

How to get Dynamic table row values

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

JSP get the value of input tag inside dynamically generated rows of a table

The ID b_quantity is not unique because you are generating rows in a table, each each row contains an input with the id b_quantity. Since the input also has the class 'b_quantity', you can use that to find the input. Try this in your click handler:

<script type="text/javascript">

$(document).ready(function() {
    $(".order").click(function() {
        event.preventDefault();
        var myRow = $(this).parents('tr');
        var quantity = $('.b_quantity',myRow).val();

        $.ajax({
            url: '/frontend/new?b_id=' + event.target.id ,
            type: 'Post',
            data: {
                b_quantity: quantity
            },
            success: function(response) {
                location.href = "/frontend/beverages";
            }
        });
    });
});


</script>

How to read dynamically generated HTML table row's td value?

Here's your updated FIDDLE.

Here is the important line:

$(this).parent().parent().remove();

I just used your click event to trigger the .remove().

How to Get Dynamically Generated Table Td Input Value