Iterating through table cells using jQuery and appending to div

Question

I am really confused here.. I am trying to get the values from a table and add those values to the div with class title using append function and .text function. The problem is that when I use the each function the last value in table gets appended and the rest are skipped.. This is my code:

<script type="text/javascript">
    $(document).ready(function() {
        $('#nameGridView tr').each(function() {
            if (!this.rowIndex) return; // skip first row
            var productName = this.cells[0].innerHTML;
            $('.title').each(function (i, obj) {
                $('.title').html(productName);

            });

        });
    });

</script>

Please tell me how to iterate through each table and add simultaneously, like say for first div title, the first value from table gets appended and so on. thanks.

Answer 1

Use append() to append to an element. Also use .eq() to get the div with the same index as the row.

<script type="text/javascript">
    $(document).ready(function() {
        var $title = $('.title');
        $('#nameGridView tr').each(function(i) {
            if (!this.rowIndex) return; // skip first row
            var productName = this.cells[0].innerHTML;
            $title.eq(i-1).append(productName);            
        });
    });

</script>