JSFiddle - React, Tailwind, and code Playground

by Sayantan Das

HTML

<table class="table table-bordered" id="sales">
  <thead>
    <tr>
      <th>No.</th>
      <th>Date</th>
      <th>Order NO.</th>
      <th>Clients Name</th>
      <th>Contact Number</th>
      <th>Address</th>
      <th>Rental Item</th>
      <th>Size</th>
      <th>Delivery Date</th>
      <th>Rented Days</th>
      <th>Rental Rate</th>
      <th>Sub Total</th>
      <th>Insurance</th>
      <th>Deposit</th>
      <th>Discount</th>
      <th>VAT</th>
      <th>Total</th>
      <th>Wallet Money</th>
      <th>Bchu Star</th>
      <th>Net Total</th>
      <th>Payment Method</th>
      <th>Sales Person</th>
      <th>Promo Code</th>
      <th>Remarks</th>
      <th>Store</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2021-11-01</td>
      <td><a href="/orders/011120210017016" target="_blank">011120210017016</a></td>
      <td>ธวัลพร ลศิริวานิช</td>
      <td>0897482476</td>
      <td>พรีมิโอ ควินโต เลขที่ 2088/104 ถ.พหลโยธิน แขวงเสนานิคม เขตจตุจักร</td>
      <td>BCHUBAB065</td>
      <td>M</td>
      <td>2021-11-02</td>
      <td>4</td>
      <td>2123</td>
      <td>2123</td>
      <td>0</td>
      <td>0</td>
      <td>212.3</td>
      <td>133.75</td>
      <td>2044.45</td>
      <td>0</td>
      <td>0</td>
      <td>2044.45</td>
      <td>ONLINE PAY FRONT STORE</td>
      <td>[email protected]</td>
      <td>MYFIRSTBCHU</td>
      <td>Nean / เต้ยขายและบิล</td>
      <td>SRIWARA</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2021-11-01</td>
      <td><a href="/orders/011120210027670" target="_blank">011120210027670</a></td>
      <td>ฐานิสร ไกรกังวาร</td>
      <td>0966422246</td>
      <td>"ห้างเลี่ยงเฮงเครื่องครัว" 124-124/1 ถ.หลวง ต.ในเมือง อ.เมือง</td>
      <td>BCHUADP023</td>
      <td>XS</td>
      <td>2021-11-18</td>
      <td>4</td>
      <td>2797</td>
      <td>2797</td>
      <td>0</td>
      <td>0</td>
      <td>279.7</td>
      <td>176.21</td>
      <td>2693.51</td>
      <td>0</td>
      <td>0</td>
     ...

JavaScript

function tableToJson(table) {
    var data = [];

    // first row needs to be headers
    var headers = [];
    for (var i=0; i<table.rows[0].cells.length; i++) {
        headers[i] = table.rows[0].cells[i].innerText; //.toLowerCase().replace(/ /gi,'');
    }

    // go through cells
    for (var i=1; i<table.rows.length; i++) {
        var tableRow = table.rows[i];
        var rowData = {};

        for (var j=0; j<tableRow.cells.length; j++) {
            rowData[ headers[j] ] = tableRow.cells[j].innerText;
						console.log(tableRow.cells);
        }

        data.push(rowData);
    }       

    return data;
}

tableToJson(document.querySelector('#sales'));