How to get these input values in an HTML table using querySelector?-CodePudding

I'm trying to get the other input values, but they're always blank. Here's the code I got:

function savePo() {
  let table = document.getElementById("dtable");
  let [, ...tr] = table.querySelectorAll("tr");
  let tableData = [...tr].map(r => {
    let td = r.querySelectorAll("td");
    return [...td].map((c, j) => j == 9 ? c.querySelectorAll('input[type="checkbox"]')[0].checked : j === 8 ? c.innerText : c.querySelectorAll('input').value)
  });
  console.log('Table Data: '   tableData);
}

This is the Fiddle in case you feel like putting a finger on the issue.

Huge thank you!

CodePudding user response：

Your issue is that you are not selecting the first input for cells that contain a regular text input (default case).

return [...td].map((c, j) =>
  j == 9
    ? c.querySelectorAll('input[type="checkbox"]')[0].checked
    : j === 8
      ? c.innerText
      : c.querySelector('input').value) // <-- Only select the first input of the TD

Here is a working example.

Note: I would avoid the nested ternary. A switch-statement would work better and its easier to read.

const findAll = (selector, element = document) =>
  [...element.querySelectorAll(selector)]

const extractData = (table) => {
  const header = findAll('thead tr th', table).map(th => th.textContent);
  const rows = findAll('tbody tr', table).map(tr =>
    findAll('td', tr).map((td, i) => {
      switch (i) {
        case 8:
          return td.textContent;
        case 9:
          return findAll('input[type="checkbox"]', td)[0].checked;
        default:
          return td.querySelector('input').value;
      }
    }));
   return { header, rows };
};

function savePo() {
  const table = document.querySelector('#dtable');
  const { header, rows } = extractData(table);
  const records = rows.map(row =>
    header.reduce((acc, col, idx) =>
      ({ ...acc, [col]: row[idx] }), {}));
  
  console.table(records);
}

<table  id="dtable">
  <thead>
    <tr>
      <th style="width:18%">Tela</th>
      <th style="width:15%">Color</th>
      <th style="width:10%">Pantone</th>
      <th style="width:15%">Contenido</th>
      <th style="width:7%">Acho(m)</th>
      <th style="width:5%">Peso(gsm)</th>
      <th style="width:7%">Precio/m (COP)</th>
      <th style="width:8%">Metros (m)</th>
      <th style="width:10%">Precio Total sin IVA</th>
      <th style="width:5%">Sel.</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" name="tableInputs" value="fdfdfdfd"></td>
      <td><input type="text" name="tableInputs" value="fsfdsfsfd"></td>
      <td><input type="text" name="tableInputs" value=""></td>
      <td><input type="text" name="tableInputs" value="100cot"></td>
      <td><input type="number" min="0"  name="numberInputs" value="1.63"></td>
      <td><input type="number" min="0"  name="numberInputs" value="273"></td>
      <td><input type="number" step="0.01" min="0"  name="numberInputs" value="" onchange="add_to_total(this)"></td>
      <td><input type="number" min="0"  name="numberInputs" value="178" onchange="add_to_total(this)"></td>
      <td ><strong>$0.00</strong></td>
      <td><input type="checkbox" checked></td>
    </tr>
    <tr>
      <td><input type="text" name="tableInputs" value="ererewr"></td>
      <td><input type="text" name="tableInputs" value="vcbchbdgfh"></td>
      <td><input type="text" name="tableInputs" value=""></td>
      <td><input type="text" name="tableInputs" value="1f23dfdsn"></td>
      <td><input type="number" min="0"  name="numberInputs" value="1"></td>
      <td><input type="number" min="0"  name="numberInputs" value="267"></td>
      <td><input type="number" step="0.01" min="0"  name="numberInputs" value="" onchange="add_to_total(this)"></td>
      <td><input type="number" min="0"  name="numberInputs" value="176" onchange="add_to_total(this)"></td>
      <td ><strong>$0.00</strong></td>
      <td><input type="checkbox" checked></td>
    </tr>
  </tbody>
</table>
<button onClick=savePo()>
  Save PO
</button>

CodePudding user response：

Update your return statement like below

return [...td].map((c, j) => { j == 9 ? (c.querySelectorAll('input[type="checkbox"]')[0].checked) : j == 8 ? c.innerText : c.querySelector('input').value } )