如何用 jQuery 循环查找 table 输入框
在开发网页时，经常需要处理表格（table）中的输入框（input）。本文将教你如何使用 jQuery 查找和循环遍历 table 中的所有输入框。让我们按照以下步骤进行。
流程概述
以下是实现这个功能的基本流程：
| 步骤 | 描述 |
|---|---|
| 1 | 准备 HTML 表格 |
| 2 | 引入 jQuery 库 |
| 3 | 使用 jQuery 查找输入框 |
| 4 | 遍历每个输入框并处理 |
| 5 | 输出结果 |
步骤详解
步骤1：准备 HTML 表格
首先，你需要有一个简单的 HTML 表格，里面包含多个输入框。下面是一个例子：
<table id="myTable">
<tr>
<td><input type="text" class="inputField" value="输入1"></td>
<td><input type="text" class="inputField" value="输入2"></td>
</tr>
<tr>
<td><input type="text" class="inputField" value="输入3"></td>
<td><input type="text" class="inputField" value="输入4"></td>
</tr>
</table>
步骤2：引入 jQuery 库
确保在你的 HTML 文件中引入 jQuery 库。你可以通过 CDN 来引入：
<script src="
步骤3：使用 jQuery 查找输入框
在 jQuery 中，可以使用选择器来查找输入框。以下是如何查找并存储输入框的代码：
$(document).ready(function() {
// 查找所有类名为 inputField 的输入框
var inputs = $('#myTable .inputField');
});
这段代码的意思是，当文档加载时，查找到所有在 #myTable 中且类名为 inputField 的输入框，并将它们存储在变量 inputs 中。
步骤4：遍历每个输入框并处理
接下来，我们将循环遍历这些输入框并执行操作，例如获取每个输入框的值。代码如下：
inputs.each(function(index, element) {
// 获取当前输入框的值
var inputValue = $(element).val();
// 在控制台输出该值
console.log('输入框 ' + (index + 1) + ' 的值为: ' + inputValue);
});
这里，each 函数用于遍历输入框集合，index 代表当前的索引，element 是 DOM 元素。我们利用 $(element).val() 方法获取当前输入框的值，并打印出来。
步骤5：输出结果
你可以在控制台中查看输出结果。以上代码完成了查找和遍历输入框的整个过程。
关系图示例
以下是使用 Mermaid 语法创建的 ER 图，表示这个过程的关系：
erDiagram
InputField {
string value "输入框内容"
}
Table {
string id "表格标识"
}
Table ||--o{ InputField : contains
这个图展示了 Table 与 InputField 之间的关系：一个表格包含多个输入框。
结尾
通过上述步骤，你已经学会了如何用 jQuery 查找和循环遍历一个表格中的输入框。掌握这些基本知识后，你可以在自己的项目中灵活应用，处理各种表格数据。希望这篇文章对你有所帮助，祝你在开发的路上越走越远！
