JQuery获取表格数据示例代码

获取表格数据是jQuery的一个基本操作，可以方便地将表格中的数据提取出来并进行处理。以下是获取表格数据的示例代码以及其详细攻略。

方式一：基于class属性选择器的表格数据获取

var tableData = [];
$(".table-class-name tr").each(function(index) {
    if (index === 0) return true;
    var rowData = [];
    $(this).children("td").each(function(cellIndex) {
        rowData.push($(this).text());
    });
    tableData.push(rowData);
});
console.log(tableData);

原理

以上代码利用了class属性选择器来选中表格，然后通过each方法得到表格中的每一行tr元素，再利用children方法得到每一行中的每一个单元格td元素，进而获取td元素中的文本内容。最终将其存储到一个二维数组tableData中。

示例

例如，我们有一个id为"my-table"的表格，它的HTML代码如下所示：

<table id="my-table" class="table-class-name">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>18</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

使用以上代码，就可以将表格中的数据获取出来，并输出到控制台上。

方式二：获取被选中单元格的表格数据

var tableData = [];
$("td.selected").each(function(index) {
    var rowData = [];
    rowData.push($(this).text());
    tableData.push(rowData);
});
console.log(tableData);

原理

以上代码利用了jQuery的选择器，根据class属性"selected"选择了表格中的被选中单元格。再按照方式一中的方法，将被选中单元格中的文本内容存储到tableData数组中。

示例

例如，我们有一个id为"my-table"的表格，它的HTML代码如下所示：

<table id="my-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="selected">张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>女</td>
    </tr>
    <tr>
      <td class="selected">王五</td>
      <td>18</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

使用以上代码，就可以将被选中单元格中的数据获取出来，并输出到控制台上。

总的来说，以上两种方式均是适用于普通的静态表格。但对于动态表格的获取，还需在代码中加入相应的判断逻辑，才能更全面地实现表格数据的获取。