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

问题描述

我试图获取html < tbody> 中的数据。基本上，我有很多这样的行;

 < tbody> 
< tr> 
< td> 63< / td> 
< td>计算机< / td> 
< td> 3434< / td> 
< td> 
< button class =btn-medium btn-danger removeid =mprDetailRemove>< i class =icon-remove>< / i>< / button> 
< / td> 
< / tr> 
< tr> 
< td> 64< / td> 
< td>固定< / td> 
< td> 111< / td> 
< td> 
< button class =btn-medium btn-danger removeid =Button1>< i class =icon-remove>< / i>< / button> 
< / td> 
< / tr> 
< tr> 
< td> 64< / td> 
< td>固定< / td> 
< td> 11< / td> 
< td> 
< button class =btn-medium btn-danger removeid =Button2>< i class =icon-remove>< / i>< / button> 
< / td> 
< / tr> 
< / tbody> 
  

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

  var table = $（＃mprDetailDataTable table tbody）; （key，val）{
 $（this）.find（'td'）。each（function（key，val））
 
 table.find {
 var productId = val [key] .innerHTML; //这是行不通的
 var product =？
 var Quantity =？
}）; 
} ）; 
  

但是，我无法获取每行的值（html文本）。 我想将这些值分配给局部变量。

另外，我不想获取 innerHTML 一个按钮（它在每一行中）>


解决方案 .each（）表示你的内部循环一次只做一个td，所以你不能设置 productId 和 product 和 quantity all在内部循环中。

同样使用 function（key，val）然后是 val [key] .innerHTML 不正确： .each（）方法传递索引（一个整数）和实际的元素， d使用函数（i，element），然后使用 element.innerHTML 。尽管jQuery也为元素设置了 this ，所以你可以说 this.innerHTML 。

无论如何，这里有一个方法来实现它：

  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（）; 
 //用productId，product，Quantity 
}）; 
  

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

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>

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 = ?
            });
        });

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)

解决方案

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.

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
    });

Demo: http://jsfiddle.net/bqX7Q/

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