Get The Values Of Input Field Of Each Row Of Html Table

I have a html table. Each row has input field with hidden borders. When I press a button then it should give me all the values of input field of each table row without using id and

Solution 1:

Since JQuery is not tagged, this is how I would do it in Javascript only:

var tableRows = document.getElementById("detailTable").rowsfor (i = 1; i < tableRows.length; i++) {
  var myrow = tableRows[i];
  for (j = 0; j < myrow.cells.length; j++) {
    var mytd = myrow.cells[j];
    console.log(mytd.children[0].value);
  }
}

Here is the JSFiddle demo

You can further fine-tune it to get your formatted output. P.S: Check your console for the output.

Solution 2:

Here you go!

$('button').on('click', function() {
    $('#detailTable > tbody').find('tr').each(function() {
        console.log($(this).find('input'));
    });
});

Solution 3:

Here I am using $.map to get the values

Also use jQuery to delete the row

$(function() {
  $(".btn-success").on("click", function() {
    var values = $("#detailTable tbody input[type=text]").map(function() {
      returnthis.value;
    }).get();
    alert(values);
  });

  $("[type=button][value=Delete]").on("click", function() {  
    $(this).closest("tr").remove()
  });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="row"style="z-index:0;"><divclass="col-md-12"><tableid="detailTable"class="table table-bordered table-sm"><theadclass="thead-light"style="text-align:center"><tr><thstyle="width:130px;">Date</th><thstyle="width:300px;">Particulars</th><thstyle="width:10px;">C.B.F</th><thstyle="width:180px;">Dr. Amount</th><thstyle="width:180px;">Cr. Amount</th><thstyle="width:200px;">Balance</th><thstyle="width:10px;">Opt</th></tr></thead><tbody><tr><td><inputtype='text'value='11-12-2018' /></td><td><inputtype='text'value='Cash' /></td><td><inputtype='text'value='' /></td><td><inputtype='text'value='20000' /></td><td><inputtype='text'value='15000' /></td><td><inputtype='text'value='-5000' /></td><td><inputtype='button'value='Delete' /></td></tbody></table></div><buttontype="button"class='btn btn-success'>Show</button></div>