how to traverse all the value of input inside a table(html/javascript)

Question

my html code is like that:

<table>
<input type="text" name="FirstInput">
....
<input type="text" name="LastInput">
</table>

my question is that, how could I traverse all the input? In fact what I want is to verify whether all the input are empty, I think if I can just traverse all the input then it is possible to do that. But how could I traverse all the value of input inside a table? Thank you very much

for (const elem in document.querySelectorAll('table input')) { console.log (elem); ... } — Mulan
– Mulan, Commented Mar 12, 2018 at 15:22
thank you naomik, but could you please explain more in detail? thank you — martinwang1985
– martinwang1985, Commented Mar 12, 2018 at 15:25
what is "table input", do you mean i should add an id for the table? thank you — martinwang1985
– martinwang1985, Commented Mar 12, 2018 at 15:26
Table input is a DOM query selector. It means any input in any table (its css like syntax) — Pierre Mallet
– Pierre Mallet, Commented Mar 12, 2018 at 16:00

wisn · Accepted Answer · 2018-03-12 16:06:34Z

1

Try this one. If you want to put input under table, you should do it correctly.

<table>
  <input>
  <input>
</table>

That code will be parsed by the browser like this.

<input>
<input>
<table>
</table>

document.getElementById('form').addEventListener('submit', e => {
  e.preventDefault();
  
  const columns = document.querySelectorAll('#form table tbody tr td input');
  const inputs = Array.from(columns)
    .filter(elm => elm.name !== '')
    .reduce((acc, cur) => ({ ...acc, [cur.name]: cur.value }), {});
    
  console.log(inputs);
    
  return false;
});

<form id="form">
  <!-- ... -->
  <table>
    <tbody>
      <tr>
        <td><input name="fullname" placeholder="fullname" type="text"></td>
      </tr>
      <tr>
        <td><input name="username" placeholder="username" type="text"></td>
      </tr>
      <tr>
        <td><input name="email" placeholder="email" type="email"></td>
      </tr>
      <tr>
        <td><input type="submit"></td>
      </tr>
    </tbody>
  </table>
  <!-- ... -->
</form>

edited Mar 12, 2018 at 16:06

answered Mar 12, 2018 at 15:35

wisn

1,03411 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

martinwang1985 Over a year ago

thank you very much. but the problem is i dont want to read allelements in one form. i want only parts of input inside a table. thank you very much

wisn Over a year ago

@martinwang1985 Edited. We need to use table element correctly.

Collectives™ on Stack Overflow

how to traverse all the value of input inside a table(html/javascript)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related