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>