jquery遍历tabletr取td值

欧易交易所欧易app 欧易下载搜狗输入法搜狗输入法 quickq下载 quickq官网

在网页开发的世界里，jQuery 是一个非常流行的JavaScript库，它提供了很多便捷的功能来操作HTML DOM元素，我们要聊聊如何使用jQuery来遍历一个表格（table）中的行（tr）并获取每个单元格（td）的值。

你得确保你的项目中已经引入了jQuery，这可以通过在你的HTML文件的<head>标签中添加一个指向jQuery库的<script>标签来实现。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

假设你有一个简单的HTML表格，看起来可能是这样的：

<table id="myTable">
  <tr>
    <td>Apple</td>
    <td>Banana</td>
  </tr>
  <tr>
    <td>Cherry</td>
    <td>Date</td>
  </tr>
</table>

我们要用jQuery来遍历这个表格的每一行，并获取每个单元格的值，这里有一个简单的步骤：

1、选择表格中的所有行（tr）。

2、对每一行进行遍历。

3、在遍历的过程中，选择当前行中的所有单元格（td）。

4、获取每个单元格的值，并进行相应的操作。

下面是实现这个过程的jQuery代码：

$(document).ready(function() {
  // 选择表格中的所有行
  $("#myTable tr").each(function() {
    // 遍历每一行
    var row = $(this);
    row.find("td").each(function() {
      // 选择当前行中的所有单元格
      var cell = $(this);
      // 获取单元格的值
      var cellValue = cell.text();
      // 打印或者对单元格的值进行其他操作
      console.log(cellValue);
    });
  });
});

在这段代码中，$(document).ready() 确保DOM完全加载后再执行jQuery代码。$("#myTable tr").each() 选择ID为myTable的表格中的所有行，并为每一行执行一个函数，在该函数内部，row.find("td").each() 选择当前行中的所有单元格，并为每个单元格执行一个函数，在这个内部函数中，cell.text() 获取单元格的文本内容。

如果你想对获取的值进行更复杂的操作，比如将它们存储在一个数组中，或者将它们发送到服务器，你可以在遍历单元格的函数中添加相应的逻辑。

如果你想将所有单元格的值存储在一个数组中，你可以这样做：

$(document).ready(function() {
  var cellValues = [];
  $("#myTable tr").each(function() {
    var row = $(this);
    row.find("td").each(function() {
      var cell = $(this);
      var cellValue = cell.text();
      cellValues.push(cellValue);
    });
  });
  // cellValues 数组包含了所有单元格的值
  console.log(cellValues);
});

这样，你就可以在jQuery中轻松地遍历表格，获取单元格的值，并根据需要进行进一步的处理，无论是前端开发还是数据处理，jQuery都提供了强大的工具来简化这些任务。