jquery获取table选中的中数据

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

在制作网页的时候，我们经常会遇到需要从表格中获取数据的情况，你可能想要知道用户选中了哪些行，或者想要获取这些行中的特定数据，使用jQuery，我们可以轻松地实现这一功能，下面，我会详细地介绍如何用jQuery获取表格中选中的数据。

我们需要一个表格，假设我们的表格是这样的：

<table id="myTable">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>北京</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>上海</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>28</td>
        <td>广州</td>
    </tr>
</table>

我们需要为表格的行添加一个点击事件，这样用户点击行时，我们就可以知道哪一行被选中了，我们可以使用jQuery的.on()方法来绑定事件：

$('#myTable').on('click', 'tr', function() {
    // 这里可以写获取数据的代码
});

每当用户点击表格中的一行时，我们就可以获取这一行的数据了，我们可以使用$(this)来获取当前被点击的行，然后使用.find()方法来查找行中的单元格（td），并获取它们的文本内容：

$('#myTable').on('click', 'tr', function() {
    var name = $(this).find('td').eq(0).text();
    var age = $(this).find('td').eq(1).text();
    var city = $(this).find('td').eq(2).text();
    console.log('姓名:', name, '年龄:', age, '城市:', city);
});

这样，每当用户点击一行，我们就可以在控制台中看到这一行的数据。

如果我们想要获取所有选中的行的数据，我们就需要一种方法来标记选中的行，我们可以使用CSS类来实现这一点，我们给表格的行添加一个点击事件，当行被点击时，我们给它添加一个CSS类，比如.selected：

$('#myTable').on('click', 'tr', function() {
    $(this).toggleClass('selected');
});

每当用户点击一行，这一行就会有一个.selected类，我们可以通过选择所有带有.selected类的行来获取所有选中的行，然后遍历这些行来获取它们的数据：

function getSelectedData() {
    var selectedData = [];
    $('#myTable tr.selected').each(function() {
        var name = $(this).find('td').eq(0).text();
        var age = $(this).find('td').eq(1).text();
        var city = $(this).find('td').eq(2).text();
        selectedData.push({ name: name, age: age, city: city });
    });
    return selectedData;
}

这样，我们就可以通过调用getSelectedData()函数来获取所有选中行的数据了。

就是使用jQuery获取表格中选中的数据的方法，这种方法简单易用，可以满足我们从表格中获取数据的需求，希望这篇文章能帮助你更好地理解和使用jQuery来处理表格数据。