jQuery 获取tr中td的input

1. 简介

在前端开发中，经常会需要获取表格中特定的元素，比如获取表格行中的input元素。使用jQuery库可以方便地实现这个功能。本文将介绍如何使用jQuery获取表格行中的input元素，并给出相应的代码示例。

2. HTML表格结构

首先，我们需要一个HTML表格来作为示例。以下是一个简单的HTML表格结构：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" value="张三"></td>
      <td><input type="number" value="18"></td>
      <td><input type="text" value="男"></td>
    </tr>
    <tr>
      <td><input type="text" value="李四"></td>
      <td><input type="number" value="20"></td>
      <td><input type="text" value="男"></td>
    </tr>
    <tr>
      <td><input type="text" value="王五"></td>
      <td><input type="number" value="25"></td>
      <td><input type="text" value="男"></td>
    </tr>
  </tbody>
</table>

以上代码定义了一个包含姓名、年龄和性别的表格。每个单元格都包含一个input元素，用于展示和编辑数据。

3. 使用jQuery获取表格行中的input元素

要使用jQuery获取表格行中的input元素，我们可以使用选择器来选择对应的元素。以下是获取第一行中的input元素的示例代码：

var inputs = $("#myTable tbody tr:first-child input");

在上述代码中，我们使用了选择器#myTable tbody tr:first-child input，它选择了表格myTable中第一个tbody中的第一个tr元素中的所有input元素。我们可以通过遍历获取的结果来访问每个input元素。

以下是遍历获取的input元素并打印value属性的示例代码：

inputs.each(function() {
  console.log($(this).val());
});

在上述代码中，我们使用了jQuery的each方法来遍历获取的input元素。对于每个元素，我们使用$(this)将其包装成jQuery对象，并调用val方法获取其value属性值。

4. 完整示例代码

以下是一个完整的示例代码，展示了如何使用jQuery获取表格行中的input元素：

<!DOCTYPE html>
<html>
<head>
  <title>获取表格中的input元素</title>
  <script src="
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" value="张三"></td>
        <td><input type="number" value="18"></td>
        <td><input type="text" value="男"></td>
      </tr>
      <tr>
        <td><input type="text" value="李四"></td>
        <td><input type="number" value="20"></td>
        <td><input type="text" value="男"></td>
      </tr>
      <tr>
        <td><input type="text" value="王五"></td>
        <td><input type="number" value="25"></td>
        <td><input type="text" value="男"></td>
      </tr>
    </tbody>
  </table>

  <script>
    $(document).ready(function() {
      var inputs = $("#myTable tbody tr:first-child input");
      inputs.each(function() {
        console.log($(this).val());
      });
    });
  </script>
</body>
</html>

将以上代码保存为一个HTML文件，并在浏览器中打开，你将在控制台中看到第一行中的输入框的值被打印出来。

5. 类图

以下是描述本文示例的类图：

classDiagram
  class Table {
    +id: string
  }