Question

我的HTML代码就是这样：

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

我的问题是，我怎么能遍历所有输入？实际上我想要的是验证所有输入是否为空，我想如果我可以遍历所有输入那么就可以这样做。但是我如何遍历表中的所有输入值？非常感谢你

Answer 1

试试这个。如果您想将input置于table下，则应该正确执行。

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

这样的代码将由浏览器解析。

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

如何遍历表中的所有输入值（html / javascript）

1 个答案: