使用 jQuery 获取 <td> 下 <input> 的值

在网页开发中，表格是一种常见的数据展示方式。你可能会在表格中的某些单元格(<td>)中放置输入框(<input>)。在这种情况下，我们常常需要获取这些输入框的值以便进行下一步的数据处理。本文将深入探讨如何使用 jQuery 来完成这一任务，并提供一些代码示例来帮助你更好地理解。

什么是 jQuery

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它使得 HTML 文档遍历和操作、事件处理、动画等变得简单。通过 jQuery，你可以轻松地访问和操作页面里面的 DOM 元素。下面，我们先看看一个简单的 HTML 表格结构：

<table>
    <tr>
        <td>
            <input type="text" value="输入值1" />
        </td>
        <td>
            <input type="text" value="输入值2" />
        </td>
    </tr>
</table>

在这个示例中，我们有一个表格行，并且在每个单元格中都有一个输入框。

使用 jQuery 获取 Input 的值

为了获取特定 <td> 中 <input> 的值，首先我们需要利用 jQuery 选择器来选中目标元素。以下是一个获取所有 <td> 中 <input> 值的示例代码：

$(document).ready(function() {
    $('td input').each(function() {
        var inputValue = $(this).val(); // 获取当前 input 的值
        console.log(inputValue); // 打印值到控制台
    });
});

在这个代码片段中，我们使用 $(document).ready() 确保 DOM 在脚本运行前已加载完成。函数 $('td input') 返回所有 <td> 下的 <input> 元素。接着，我们使用 each() 方法遍历每个选中的输入框，利用 $(this).val() 获取并打印每个输入框的值。

常见场景

1. 用户填表后提交

在实际应用中，用户可能会填写多个输入框并希望在提交表单时获取所有的输入值。例如，我们可以在一个按钮点击事件中收集这些值：

<button id="submit">提交</button>
<script>
    $('#submit').click(function() {
        var values = [];
        $('td input').each(function() {
            values.push($(this).val());
        });
        console.log(values); // 打印所有输入值
    });
</script>

在这个示例中，用户点击按钮后，我们遍历所有的输入框并将其值保存到一个数组中，然后打印这个数组。

2. 具体目标的获取

有时，我们并不需要获取所有的输入值，而是仅获取特定单元格下的输入框的值。例如，如果我们只想获取第二个 <td> 中 <input> 的值，可以这样：

$(document).ready(function() {
    var specificValue = $('td:eq(1) input').val(); // 获取第二个 td 下的 input 的值
    console.log(specificValue); // 打印具体值
});

在这个例子中，$('td:eq(1) input') 选择了第二个 <td> 中的 <input>，并获取其值。

关系图

为了更好地理解 jQuery 与 DOM 的关系，我们可以使用 ER 图来表示它们之间的关系。以下是一个简单的 ER 图示例：

erDiagram
    DOM {
        string window
        string document
        string body
        string table
        string tr
        string td
        string input
    }
    DOM ||--o{ jQuery : accesses
    jQuery ||--o{ input : manipulates

在这个关系图中，jQuery 作为一个库通过 accesses 关系访问 DOM 元素，同时还能通过 manipulates 关系对 <input> 元素进行操作。

结论

使用 jQuery 获取 <td> 下的 <input> 值是非常简单的，无论是获取所有输入框的值，还是只获取特定输入框的值，jQuery 提供了便捷的方法和工具，使得这个过程高效且易于实现。希望通过今天的分享，能够帮助你更好地理解 jQuery 的基本用法以及它在表格操作中的应用。

如果你有任何问题或者想进一步讨论的内容，欢迎随时提问！