Pfthb

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 class, if it is possible.

Html:

<div class="row" style="z-index:0;">
<div class="col-md-12">
 <table id="detailTable" class="table table-bordered table-sm">
 <thead class="thead-light" style="text-align:center">
 <tr>
 <th style="width:130px;">Date</th>
 <th style="width:300px;">Particulars</th>
 <th style="width:10px;">C.B.F</th>
 <th style="width:180px;">Dr. Amount</th>
 <th style="width:180px;">Cr. Amount</th>
 <th style="width:200px;">Balance</th>
 <th style="width:10px;">Opt</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td> <input type='text' value='11-12-2018'/> </td>
 <td> <input type='text' value='Cash'/> </td>
 <td> <input type='text' value=''/> </td>
 <td> <input type='text' value='20000'/> </td>
 <td> <input type='text' value='15000'/> </td>
 <td> <input type='text' value='-5000'/> </td>
 <td> <input type='button' value='Delete'/> </td>
 </tr>
 </tbody>
 </table>
</div>
<button class='btn btn-success'>Show</div>
</div>

JavaScript I tried

var rowsInTable = $("#detailTable tr").length;
rowsInTable--;
row.parentNode.removeChild(row);

for(i=1;i<=rowsInTable;i++)

 console.log(document.getElementById("detailTable").rows[i].innerHTML);

Here you go!

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

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() 
 return this.value;
 ).get();
 alert(values);
 );

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

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

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

var tableRows = document.getElementById("detailTable").rows

for (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.