循环遍历每个 HTML 表格列并使用 jQuery 获取数据 [英] Loop Through Each HTML Table Column and Get the Data using jQuery

问题描述

我正在尝试获取 html 中的数据.基本上，我有很多这样的行；

i'm trying to get the data inside the html <tbody>. Basically, i have many rows like this;

                <tbody>
                    <tr>
                        <td>63</td>
                        <td>Computer</td>
                        <td>3434</td>
                        <td>
                            <button class="btn-medium btn-danger remove" id="mprDetailRemove"><i class="icon-remove"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>64</td>
                        <td>Stationary</td>
                        <td>111</td>
                        <td>
                            <button class="btn-medium btn-danger remove" id="Button1"><i class="icon-remove"></i></button>
                        </td>
                    </tr>
                    <tr>
                        <td>64</td>
                        <td>Stationary</td>
                        <td>11</td>
                        <td>
                            <button class="btn-medium btn-danger remove" id="Button2"><i class="icon-remove"></i></button>
                        </td>
                    </tr>
                </tbody>

现在，我正在循环并尝试获取这样的 <td> 值；

Now, i'm looping through and trying to get the <td> values like this;

        var table = $("#mprDetailDataTable table tbody");

        table.find('tr').each(function (key, val) {
            $(this).find('td').each(function (key, val) {
                var productId = val[key].innerHTML; // this isn't working
                var product = ?
                var Quantity = ?
            });
        });

但是，我无法获得每一行的值(html 文本).我想将这些值赋给局部变量.
另外，我不想获得按钮的 innerHTML(在每一行中)

But, i'm not able to get the values(html text) of the each row. I want to assign these values to local variables.
Also, i don't want to get the innerHTML of a button (which is in each row)

推荐答案

使用嵌套的 .each() 意味着你的内循环一次做一个 td，所以你不能设置productId 和 product 和 quantity 都在内循环中.

Using a nested .each() means that your inner loop is doing one td at a time, so you can't set the productId and product and quantity all in the inner loop.

同时使用 function(key, val) 然后 val[key].innerHTML 是不对的:.each() 方法 传递索引(整数)和实际元素，因此您将使用 function(i, element) 然后是 element.innerHTML.虽然 jQuery 也将 this 设置为元素，所以你可以直接说 this.innerHTML.

Also using function(key, val) and then val[key].innerHTML isn't right: the .each() method passes the index (an integer) and the actual element, so you'd use function(i, element) and then element.innerHTML. Though jQuery also sets this to the element, so you can just say this.innerHTML.

无论如何，这是让它工作的方法:

Anyway, here's a way to get it to work:

    table.find('tr').each(function (i, el) {
        var $tds = $(this).find('td'),
            productId = $tds.eq(0).text(),
            product = $tds.eq(1).text(),
            Quantity = $tds.eq(2).text();
        // do something with productId, product, Quantity
    });

演示:http://jsfiddle.net/bqX7Q/

这篇关于循环遍历每个 HTML 表格列并使用 jQuery 获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！