bootstrap怎么获取table数据

1、Bootstrap中的Table

在Web开发中，表格(table)是不可或缺的元素之一。Bootstrap 中的 Table 组件相比于普通的 HTML 表格更加美观、简洁、易用。因此，Bootstrap 的 Table 组件在实际开发中得到了广泛的应用。

Table 的基本结构如下：

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

2、获取Table中的数据

在表格中获取数据是一个比较常见的需求。获取表格中的数据可以通过jQuery来实现，这里我们将通过 jQuery 的 each() 函数来获取表格中的各个单元格的数据。

2.1 jQuery的each()函数

each() 方法为您提供了一种简单、但是功能强大的方式来迭代匹配集中的元素。each() 方法为每个匹配元素规定一个函数，然后全局地运行该函数。此函数可设置两个参数：被选元素的索引位置和当前元素的值（按顺序）。然后，可以对返回的结果进行一些操作。

具体用法如下：

$.each( array, function(index, value){
    //处理代码
});

例如：

var arr = [ 0, 1, 2, 3, 4 ];
$.each( arr, function(index, value){
    alert( "Index: " + index + " Value: " + value );
});

执行上述代码，弹出了5 个提示框，分别显示了每个数组元素。

2.2 获取表格数据的步骤

根据表格的HTML代码，可以得到表格的基本结构:

<table id="mytable" class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>品牌</th>
            <th>价格</th>
            <th>数量</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>ThinkPad</td>
            <td>5999</td>
            <td>3</td>
        </tr>
        <tr>
            <td>2</td>
            <td>MacBook Pro</td>
            <td>9999</td>
            <td>2</td>
        </tr>
    </tbody>
</table>

用jQuery 获取表格数据的步骤如下：

定义一个数组，用于保存表格数据。

遍历表格的每一行。

遍历每一行的每一列，获取每一列的文本值，并将其添加到数据数组中。

用 jQuery 获取表格数据的代码如下：

var rows = [];
$("#mytable").find("tbody tr").each(function (i, row) {
    var rowCells = [];
    $(row).find("td").each(function (j, cell) {
        rowCells.push($(cell).text());
    });
    rows.push(rowCells);
});

下面是上述代码的解析：

定义一个空数组 rows。

使用 jQuery find() 方法查找 id 为 “mytable” 的表格的 tbody 下的所有行。

使用 jQuery each() 方法遍历每一行。

定义一个空数组 rowCells。

使用 jQuery find() 方法遍历行中的每一个单元格，并使用 jQuery text() 方法获取单元格中的文本值，并将其添加到数组 rowCells 中。

将 rowCells 数组添加到 rows 数组中。

当遍历完成后，rows 数组将保存整张表格的数据。

上述代码将表格的数据保存在二维数组中，并将其存储在 rows 变量中。

3、总结

本文主要介绍了 Bootstrap 中 Table 组件的用法，以及如何使用 jQuery 获取表格中的数据。Table 组件是 Bootstrap 中一个重要的组件，应用非常广泛。同时，jQuery 提供的强大的 each() 函数，使得获取表格数据成为了一件非常简单的事情。

总之，Bootstrap 和 jQuery 的组合，在 Web 开发中是一个非常好用的组合，它们的强大功能已经为开发人员带来了极大的便利。