JSFiddle - React, Tailwind, and code Playground

by santosonit

HTML

<div class="row" id="tableDiv">
  <div class="col">

    <div id="po-items" class="table-responsive">
      <div class="card" id="card">
        <table class="table table-hover table-vcenter" id="dtable">
          <thead>
            <tr>
              <th style="width:15%">Cliente</th>
              <th style="width:8%;">Referencia</th>
              <th style="width:28%">ArtĂ­culo</th>
              <th style="width:28%">Proceso</th>
              <th style="width:7%">Total</th>
              <th style="width:7%">Precio sin IVA</th>
              <th style="width:7%">Precio Total sin IVA</th>
              <th style="width:7%">Sel.</th>
            </tr>
          </thead>
          <tbody id="tableRows">
            <tr>
              <td><input type="text" name="tableInputs" value="Some Client Name"></td>
              <td><input type="text" name="tableInputs" value="TKM018"></td>
              <td><textarea name="articuloField" id="articulo" rows="2" cols="65" wrap="soft">Testing the textarea value field which never seems to work!!!!!!!!!!</textarea></td>
              <td><input type="text" name="tableInputs" value="Ubicado en contorno de cintura"></td>
              <td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="150" onchange="add_to_total(this)"></td>
              <td><input type="number" min="0" class="qty" name="numberInputs" value="" onchange="add_to_total(this)"></td>
              <td class="total_price">$150.00</td>
              <td><input type="checkbox"></td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td id="totalTitle" colspan="6" align="right"><strong>Total:</strong></td>
              <td id="totalValue" class="total">$150.00</td>
            </tr>
          </tfoot>
        </table>
        <a href=javascript:savePo('user')>Save</a>
      </div>
    </div>

JavaScript

function savePo(user) {
  user = 'user'

  let date = new Date();
  options = {
    year: 'numeric',
    month: 'numeric',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    hour12: false,
    timeZone: 'CST'
  };

  let timeStamp = new Intl.DateTimeFormat('en-US', options).format(date).toString();
  timeStamp = timeStamp.replace(",", "");
  let origin = "Trim";

  const tableRows = document.querySelectorAll("#tableRows tr");

  let tableData = [];
  if (origin == 'Trim') {
    tableData = [...tableRows].map(r => {
      let td = r.querySelectorAll("td");
      return [...td].map((c, j) =>
        j == 2 ? c.value : //THIS IS THE LINE WHICH IS NOT WORKING PROPERLY
        j == 7 ? c.querySelectorAll('input[type="checkbox"]')[0].checked :
        j == 6 ? c.innerText :
        c.querySelector('input').value)
    });
    console.log('Table Data: ' + tableData)
  }
}