javascript - 迭代 td 中的每个输入字段

Question

我正在尝试使用 jQuery 迭代表中的每个输入字段。

<table border="1">
    <tbody><tr>
        <td><input value="0"><input value="1" type="hidden"></td>
        <td><input value="2"><input value="3" type="hidden"></td>
        <td><input value="4"><input value="5" type="hidden"></td>
        <td><input value="6"><input value="7" type="hidden"></td>
    </tr>
    <tr>
        <td><input value="7"><input value="8" type="hidden"></td>
        <td><input value="9"><input value="10" type="hidden"></td>
        <td><input value="11"><input value="12" type="hidden"></td>
        <td><input value="13"><input value="14" type="hidden"></td>
    </tr>

</tbody></table>
<button onclick="test()">Click me!</button>

Answer 1

使用 each() 用于迭代dom元素

The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element. ( Taken from https://api.jquery.com/each/ )

function test() {
  $('table td input').each(function() {
    console.log(this.value,this.type);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
  <tbody>
    <tr>
      <td>
        <input value="0">
        <input value="1" type="hidden">
      </td>
      <td>
        <input value="2">
        <input value="3" type="hidden">
      </td>
      <td>
        <input value="4">
        <input value="5" type="hidden">
      </td>
      <td>
        <input value="6">
        <input value="7" type="hidden">
      </td>
    </tr>
    <tr>
      <td>
        <input value="7">
        <input value="8" type="hidden">
      </td>
      <td>
        <input value="9">
        <input value="10" type="hidden">
      </td>
      <td>
        <input value="11">
        <input value="12" type="hidden">
      </td>
      <td>
        <input value="13">
        <input value="14" type="hidden">
      </td>
    </tr>

  </tbody>
</table>
<button onclick="test()">Click me!</button>