I have multiple tables on my page. I want to pick a particular column from all tables but I am unable to understand the problem with my piece of code.
It looks like this:

function getTableColumnValues(){
    var table, columnValue, tableId
    table=document.getElementsByTagName('table');
    for(l=1;l<table.length;l++){
        tableId = table[l].id
        if(tableId != ""){
            columnValue = $(tableId+'>tbody>tr>td:nth-child(2)').each(function(){ // Here 2 is the column number of which the data I want. 
                $(this).text()
                });
            console.log('TABLE ID: ',tableId);
            console.log("COLUMN VALUE: ",columnValue);
        }
    }
}

but my debugger's console shows this:

TABLE ID: id_219
COLUMN VALUE: Object[]

TABLE ID: id_220
COLUMN VALUE: Object[]

TABLE ID: id_221
COLUMN VALUE: Object[]

Is it ok to place jquery inside javascript code?
Please help me, where I am doing it wrong?

I have multiple tables on my page. I want to pick a particular column from all tables but I am unable to understand the problem with my piece of code.
It looks like this:

function getTableColumnValues(){
    var table, columnValue, tableId
    table=document.getElementsByTagName('table');
    for(l=1;l<table.length;l++){
        tableId = table[l].id
        if(tableId != ""){
            columnValue = $(tableId+'>tbody>tr>td:nth-child(2)').each(function(){ // Here 2 is the column number of which the data I want. 
                $(this).text()
                });
            console.log('TABLE ID: ',tableId);
            console.log("COLUMN VALUE: ",columnValue);
        }
    }
}

but my debugger's console shows this:

TABLE ID: id_219
COLUMN VALUE: Object[]

TABLE ID: id_220
COLUMN VALUE: Object[]

TABLE ID: id_221
COLUMN VALUE: Object[]

Is it ok to place jquery inside javascript code?
Please help me, where I am doing it wrong?

• javascript
• jquery

• 4 $("#"+tableId... but why the mix of DOM and jQuery? do $('table').each... and .eq – mplungjan Commented Aug 12, 2013 at 9:57

3 Answers 3

You need to place the console.log for the value within the each, as that it the iteration you're looking at:

for(l=1;l<table.length;l++){
    tableId = table[l].id
    if(tableId != ""){
        console.log('TABLE ID: ',tableId);
        $(tableId+'>tbody>tr>td:nth-child(2)').each(function(){ // Here 2 is the column number of which the data I want. 
            var columnValue = $(this).text();
            console.log("COLUMN VALUE: ", columnValue);
        });
    }
}

The reason it is currently displaying Object[] is because the return value of each() is a plain jQuery object - you need to deal with the target element of the iteration within the handler function.

Also, take note of @mplungjan's advice regarding the odd mix of plain javascript and jQuery.

Here is my suggestion

1. get only tables with IDs
2. use jQuery .each on the tables and their cells
3. pass the column you want for future flexibility

Live Demo

function getTableColumnValues(col){
    var columnValues=[];
    $('table[id]').each(function() {
        $('tr>td:nth-child('+col+')',$(this)).each(function() {
          columnValues.push($(this).text());
        });
    });
    return columnValues;
}
var vals = getTableColumnValues(2);
window.console && console.log(vals);

function getTableColumnValues(){
    var table=document.getElementsByTagName('table');
    for(l=1;l<table.length;l++){
        for(i=1;i<table.rows.length;i++){
           console.log(table.rows[i].cells[2]);
        }
    }
}