Loop Through Each HTML Table Column and Get the Data using jQuery

by

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/

Leave a Comment

tech