JSFiddle - React, Tailwind, and code Playground

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>
      </tbody>
    </table>
  </div>
  <button class='btn btn-success'>Show</button>
</div>

JavaScript

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