jquery - get elements in a specified columns of an html table

Question

Using jquery, I'd like to get all elements in a specified columns of an html table. Please note that it can be more than one column

For example, if I have the following html table:

<table>
   <tr> 
    <td>
      a
    </td>
    <td>
      b
    </td>
    <td>
      c
    </td>
   </tr>
   <tr> 
    <td>
      1
    </td>
    <td>
      2
    </td>
    <td>
      3
    </td>
   </tr>
</table>

which looks as following:

1     2      3
a     b      c

I would like to get 1, 3, a , c

How should I do it? What would be the most efficient way to do so? (I am traversing a huge table generated by some reporting utility)

Please rephrase your question!

waqasahmed
– waqasahmed

2011-03-29 15:39:16 +00:00
Commented Mar 29, 2011 at 15:39 — waqasahmed
– waqasahmed, Commented Mar 29, 2011 at 15:39
What if you have multiple rows?

Darin Dimitrov
– Darin Dimitrov

2011-03-29 15:39:33 +00:00
Commented Mar 29, 2011 at 15:39 — Darin Dimitrov
– Darin Dimitrov, Commented Mar 29, 2011 at 15:39
I second @waqasahmed it is very confusing as it is.

Trufa
– Trufa

2011-03-29 15:39:53 +00:00
Commented Mar 29, 2011 at 15:39 — Trufa
– Trufa, Commented Mar 29, 2011 at 15:39

Kaivosukeltaja · Accepted Answer · 2011-03-29 15:45:29Z

12

You can use the :nth-child() selector.

$("tr td:nth-child(1), tr td:nth-child(3)").css('color', 'red');

answered Mar 29, 2011 at 15:45

Kaivosukeltaja

15.8k5 gold badges45 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vondip Over a year ago

interesting, is there any way to do this but with multiple patterns, without traversing the entire cells again?

Kaivosukeltaja Over a year ago

As far as I know, you have to have a separate pattern for each column, unless you want to select only odd or even rows, in which case you can use :nth-child(odd).

user447356 · Accepted Answer · 2011-03-29 15:51:10Z

10

Here is more or less generic example letting you define the desired indices as array:

var cellIndexMapping = { 0: true, 2: true };
var data = [];

$("#MyTable tr").each(function(rowIndex) {
    $(this).find("td").each(function(cellIndex) {
        if (cellIndexMapping[cellIndex])
            data.push($(this).text());
    });
});

$("#Console").html(data.join("<br />"));

Test case: http://jsfiddle.net/yahavbr/FuDh2/

Using associative array to have faster performance, as far as I know search for specific item in such array should be optimized already.

Note that in JS first index is always 0, so 1^st and 3^rd cells means indices 0 and 2.

answered Mar 29, 2011 at 15:51

user447356

Comments

John Fisher · Accepted Answer · 2011-03-29 15:45:18Z

2

var table = $("table"); // Make this more accurate if there are multiple tables on the page
var rows = table.find("tr");  // Will find too much if there are <tr> tags nested in each other

for (var i=0; i=rows.length; ++i) {
  var cells = rows.eq(i).find("td");
  var values = [cells.eq(0).text(), cells.eq(2).text()];
}

answered Mar 29, 2011 at 15:45

John Fisher

22.8k2 gold badges43 silver badges67 bronze badges

Comments

Arun · Accepted Answer · 2011-03-29 15:56:19Z

1

You can do it with a selector using nth-child. The following is another way.

$("TABLE").find("tr").each(function(){
    var tr = this;
    $([0,2]).each(function(){
        alert($(tr[this]).html());
    });
});

For 1st and 3rd you'll have to specify 0, 2

edited Mar 29, 2011 at 15:56

answered Mar 29, 2011 at 15:43

Arun

3,0673 gold badges37 silver badges59 bronze badges

Comments

EdChum · Accepted Answer · 2012-06-24 11:55:40Z

0

you can do like this

var retorno=[];
linha=$("td:nth-child(1), td:nth-child(3)").clone().each(function(){retorno.push($(this).text())});

$.each(retorno,function(index, item) {$('#Console').append(item+', ');});

1-use clone to not modify table, if you remove table modify after this line. 2-put elements into retorno array 3-use each for print inside element Console

you can make too like this. with one line:

$("td:nth-child(1), td:nth-child(3)").clone().map(function(){ return $(this).text()}).get().join(',');

map - create array with return columns get - get the array join - chang array in line separete with comma and show

1,3,a,c

it's the best i can do.

edited Jun 24, 2012 at 11:55

EdChum

397k204 gold badges836 silver badges583 bronze badges

answered Sep 18, 2011 at 21:27

sergio

11 bronze badge

Comments

Fabio Ribeiro de Carvalho · Accepted Answer · 2021-03-22 10:16:53Z

Javascipt alternative. Two functions that can be used independently

First, The function that return the column by given the index column
Second, the function that will use the function before, but you will pass the number of column that you want to return (using varargs)

const table = document.querySelector("table");
// geting the first and third column
let elementsFromColumn = getAllElementsOfMultiplesColumn(table, 0,2);

//Just to print the values
let elementsFromColumnToString = elementsFromColumn.join();
console.log("Get first and third column elemets:",elementsFromColumnToString); // a,1,c,3

// geting the third and second column
elementsFromColumn = getAllElementsOfMultiplesColumn(table, 2,1);
elementsFromColumnToString = elementsFromColumn.join();
console.log("Get third and second column elements:",elementsFromColumnToString);

// geting just the first column
elementsFromColumn = getAllElementsOfMultiplesColumn(table, 0);
elementsFromColumnToString = elementsFromColumn.join();
console.log("Get just first column elements:",elementsFromColumnToString);

// geting all column
elementsFromColumn = getAllElementsOfMultiplesColumn(table, 0, 1, 2);
elementsFromColumnToString = elementsFromColumn.join();
console.log("Get first, second and third column elements:",elementsFromColumnToString);

/**
 * 
 * @param {Object} table The tableDOM element
 * @param {Number} columnIndex The column index
 * @returns Array containes the elments of a column chosen by columnIndex
 */
function getColumnElementsByColumnIndex(table, columnIndex) {
    const tableRows = table.querySelectorAll("tr");
    let columnElements = [];

    for (let row of tableRows) {
        let rowElements = row.querySelectorAll("td");
        columnElements.push(rowElements[columnIndex].innerText);
    }

    return columnElements;
}

/**
 * 
 * @param {Object} table: The Table DOM element 
 * @param  {...number} indexesColumn: the indexes of the column 
 * @returns Array[][] represent the columns chosen by indexes
 */
function getAllElementsOfMultiplesColumn(table, ...indexesColumn) {
    let elementsSelectedByColumn = [];
    const numberOfColumn = table.querySelectorAll("tr").length;

    indexesColumn.forEach((indexColumn)=>{
        if(indexColumn > numberOfColumn) throw Error(`the column indexe: ${indexColumn} is out of bound`);
        if(typeof indexColumn !== "number") throw Error("The indexeColumns must be a number type");
    });

    for (let indexeColumn of indexesColumn) {
        elementsSelectedByColumn.push(getColumnElementsByColumnIndex(table, indexeColumn));
    }

    return elementsSelectedByColumn;
}

<table>
    <tr>
        <td>
            a
        </td>
        <td>
            b
        </td>
        <td>
            c
        </td>
    </tr>
    <tr>
        <td>
            1
        </td>
        <td>
            2
        </td>
        <td>
            3
        </td>
    </tr>
</table>

<script src="./findElementInColumn.js"></script>

If you want that the function return the DOM element instead of the innerText, just remove the innerText from the first function, like so:

columnElements.push(rowElements[columnIndex]);

Collectives™ on Stack Overflow

jquery - get elements in a specified columns of an html table

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related