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

Question

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.

querySelectorAll returns a NodeList which doesn't have a value property. Try mapping over it. [...c.querySelectorAll('input')].map(({ value }) => value) — Emiel Zuurbier
– Emiel Zuurbier, Commented Jul 20, 2022 at 19:56
What, exactly, are "the other" input values? Exactly what is "blank"? Exactly what are the expected/desired results, and what are the actual? — outis
– outis, Commented Jul 20, 2022 at 20:18
Note that adding a link to a live example in addition to having code in the question is welcomed, that shouldn't take the place of having minimal sample code in the question itself, both so the question is self-contained and in case the linked page goes down, goes away or gets edited. For HTML, CSS an JS, the Snippet feature allows you to create a live example on SO itself. — outis
– outis, Commented Jul 20, 2022 at 20:19
Hey, @outis! Thank you! I usually post question on other subjects and still didn't quite know how to post it so that it can be run in the question itself. Thanks for the link with the live example instruction. — onit
– onit, Commented Jul 20, 2022 at 23:50

Mr. Polywhirl · Accepted Answer · 2022-07-20 20:22:47Z

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 class="table table-hover table-vcenter" 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" class="item-table-values" name="numberInputs" value="1.63"></td>
      <td><input type="number" min="0" class="item-table-values" name="numberInputs" value="273"></td>
      <td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="" onchange="add_to_total(this)"></td>
      <td><input type="number" min="0" class="qty" name="numberInputs" value="178" onchange="add_to_total(this)"></td>
      <td class="total_price"><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" class="item-table-values" name="numberInputs" value="1"></td>
      <td><input type="number" min="0" class="item-table-values" name="numberInputs" value="267"></td>
      <td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="" onchange="add_to_total(this)"></td>
      <td><input type="number" min="0" class="qty" name="numberInputs" value="176" onchange="add_to_total(this)"></td>
      <td class="total_price"><strong>$0.00</strong></td>
      <td><input type="checkbox" checked></td>
    </tr>
  </tbody>
</table>
<button onClick=savePo()>
  Save PO
</button>

Thank you! All new to me and I'll have to learn this other approach. Very insightful! Thanks!

Suresh · Accepted Answer · 2022-07-20 20:04:12Z

2

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

answered Jul 20, 2022 at 20:04

Suresh

9331 gold badge10 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related