如何用jQuery的each()循环遍历表格并获取单元格输入框内容

Hey there! Let's break down how to use jQuery's each() method to tackle your table input needs. I'll cover both scenarios you mentioned with clear examples based on your table structure.

First, here's the sample table HTML we'll work with:

<h3>Input Table</h3>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Number</th>
  </tr>
  <tr>
    <td>
      <input type="text" placeholder="First Name">
    </td>
    <td>
      <input type="text" placeholder="First Number">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" placeholder="Middle Name">
      <input type="text" placeholder="Last Name">
    </td>
    <td>
      <input type="text" placeholder="Area Code">
      <input type="text" placeholder="Phone Number">
    </td>
  </tr>
</table>

1. 获取每个单元格中所有输入框的文本 #

To grab text from every input in each table cell, we'll nest two each() loops: one to iterate over cells, and another to iterate over inputs inside each cell.

// Collect values from all inputs in every table cell
$('table tr:not(:first) td').each(function() {
  // Reference the current cell we're looping through
  const currentCell = $(this);
  
  // Loop through every input inside this cell
  currentCell.find('input').each(function() {
    const inputValue = $(this).val().trim();
    
    // Only process non-empty values (optional but useful)
    if (inputValue) {
      console.log('Input value:', inputValue);
      // You can push these values to an array, display them, etc.
    }
  });
});

Notes: #

• tr:not(:first) skips the header row (since it has <th> instead of inputs). Remove this if you want to include header cells (though they probably won't have inputs).
• trim() cleans up extra spaces from user input.
• If you need to store all values, initialize an empty array before the loops and push inputValue into it.

2. 获取每个单元格中最后一个输入框的文本 #

For this scenario, we don't need nested loops—we can directly target the last input in each cell using jQuery's :last selector.

// Collect values from the last input in every table cell
$('table tr:not(:first) td').each(function() {
  // Find the last input in the current cell
  const lastInput = $(this).find('input:last');
  
  // Make sure the cell actually has an input before accessing its value
  if (lastInput.length) {
    const inputValue = lastInput.val().trim();
    if (inputValue) {
      console.log('Last input value in cell:', inputValue);
      // Again, store or use this value as needed
    }
  }
});

Notes: #

• lastInput.length checks if there's an input in the cell (avoids errors if a cell is empty).
• If your cells have other elements mixed with inputs, input:last will still reliably pick the final input element.

Bonus: Interactive Demo #

To test this easily, add buttons to trigger the logic:

<button id="getAllInputs">Fetch All Input Values</button>
<button id="getLastInputs">Fetch Last Input Values Per Cell</button>

<script>
$(document).ready(function() {
  // Button for all inputs
  $('#getAllInputs').click(function() {
    const allValues = [];
    $('table tr:not(:first) td').each(function() {
      $(this).find('input').each(function() {
        const val = $(this).val().trim();
        if (val) allValues.push(val);
      });
    });
    alert('All non-empty input values:\n' + allValues.join('\n'));
  });

  // Button for last inputs per cell
  $('#getLastInputs').click(function() {
    const lastValues = [];
    $('table tr:not(:first) td').each(function() {
      const lastInput = $(this).find('input:last');
      if (lastInput.length) {
        const val = lastInput.val().trim();
        if (val) lastValues.push(val);
      }
    });
    alert('Last non-empty input values per cell:\n' + lastValues.join('\n'));
  });
});
</script>

Hopefully these examples fit exactly what you're trying to build! Let me know if you need tweaks for edge cases like empty cells or different input types.

内容的提问来源于stack exchange，提问作者Mr WebDev