jquery table 表格所有的值

原创

mob64ca12df5e97 2024-11-30 03:36:48 ©著作权

文章标签 数据 jQuery Data 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12df5e97的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 jQuery 获取表格中所有的值

在现代网页开发中，表格是展示数据的常见方式。通过使用jQuery，开发者可以轻松地获取表格中的所有数据，并进行处理。本文将介绍如何使用jQuery获取HTML表格中的所有值，并提供相关代码示例，帮助理解这一过程。

表格结构

首先，我们需要有一个基本的HTML表格结构。以下是一个示例表格：

<table id="myTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>UK</td>
        </tr>
        <tr>
            <td>Mike Johnson</td>
            <td>40</td>
            <td>Canada</td>
        </tr>
    </tbody>
</table>

jQuery 代码示例

现在，我们将使用 jQuery 获取表格中的所有值。以下是实现的代码示例：

$(document).ready(function(){
    var tableData = [];
    
    $('#myTable tbody tr').each(function(){
        var rowData = {};
        $(this).find('td').each(function(index){
            switch(index) {
                case 0:
                    rowData['Name'] = $(this).text();
                    break;
                case 1:
                    rowData['Age'] = $(this).text();
                    break;
                case 2:
                    rowData['Country'] = $(this).text();
                    break;
            }
        });
        tableData.push(rowData);
    });
    
    console.log(tableData);
});

代码解析

$(document).ready(): 这个函数确保DOM完全加载后才执行代码。
$('#myTable tbody tr'): 选择表格主体中的每一行。
each(): 对每一行执行指定函数。
$(this).find('td'): 在当前行中查找每一个单元格（td）。
switch(index): 根据单元格的索引为相应的属性赋值。
tableData.push(rowData): 将每行数据作为对象推入数组中。

最终，在控制台中打印出一个数组，包含所有的行数据，每一行以对象的形式存储。

关系图与类图

接下来，我们可以使用mermaid语法来定义与数据相关的关系图以及类图。

关系图

erDiagram
    TABLE ||--o{ DATA : contains
    DATA {
        string Name
        int Age
        string Country
    }

类图

classDiagram
    class Table {
        +List<Data> tableData
        +void addRow(Data data)
        +List<Data> getAllData()
    }
    class Data {
        +string Name
        +int Age
        +string Country
    }
    Table "1" *-- "*" Data : contains

在以上的关系图中，我们可以看到表（Table）与数据（Data）之间的关系。每个表格可以包含多个数据行，数据类定义了每个数据行所需的属性。