read value from textbox inside html table cell

Question

I'm appending data to a table using the for loop:

for (var i = 0; i < data.length; i++) {
    date = data[i].inv_Date;
    invDate = date.substring(0, 10);
    billNo = data[i].Bill_No;
    netAmt = parseFloat(data[i].Net_Amt).toFixed(2);
    paidAmt = parseFloat(data[i].Paid_Amt).toFixed(2);
    balance = (parseFloat(netAmt) - parseFloat(paidAmt)).toFixed(2); //id = "damt['+i+']"
    $("#invoiceDetailTbl tbody").append("<tr id=" + i + ">" + "<td>" + invDate + "</td>" + "<td>" + billNo + "</td>" + "<td>" + netAmt + "</td>" + "<td>" + paidAmt + "</td>" + "<td>" + '<input type="text" class="discountAmt form-control input-sm" style="width: 100px;" placeholder="Discount Amt" id="damt" name="damt' + i + '">' + "</td>" + "<td>" + '<input type="text" class="payingAmt form-control input-sm" style="width: 100px;" placeholder="Paying Amt" id="pamt">' + "</td>" + "<td>" + balance + "</td>" + "<td>" + '<span class="glyphicon glyphicon-trash"></span>' + "</td>" + "</tr>");
    totalAmt = totalAmt + parseFloat(netAmt);
    totalBalance = totalBalance + parseFloat(balance);
}

I'm reading value of a textbox using:

for (var i = 0; i < tableRowCount; i++) {
    var rowDisAmt = table.rows.item(i + 1).cells[4].innerText;
}

But I always get null value. How can I access textbox values inside a html tag?

Answer 1

You can use this:

for (var i = 0; i < tableRowCount; i++) {
        var rowDisAmt = $(table.rows.item(i + 1).cells[4]).find('input').val();
}

Answer 2

you can use each function:

/*JQuery*/
$(".discountAmt).each(function( index ) {
  console.log( index + ": " + $( this ).val());
});

/*JAVASCRIPT */
var myclass = document.getElementsByClassName('discountAmt');
for (var i = 0; i < myclass.length; i++) {
    var item = myclass[i];  
    item.innerHTML = 'this is value';
}