var html_table =
    "<table class='table'>" +
    "<thead>" +
    "<tr><th>#</th><th>First</th><th>Second</th><th>Third</th><th>Fourth</th><th>Fifth</th></tr></thead>" +
    "<tbody>" +
    "<tr><td ></td><td></td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr>" +
    "</tbody>" +
    "</table>";

var $html_table = $(html_table);
var first_column= $html_table.find('???');
var second_column= $html_table.find('???');

So i have above table in javascript and using jquery to get the first and third columns. But find() method doesn't seem to be flexible enough to get first and third column inside tbody element

var html_table =
    "<table class='table'>" +
    "<thead>" +
    "<tr><th>#</th><th>First</th><th>Second</th><th>Third</th><th>Fourth</th><th>Fifth</th></tr></thead>" +
    "<tbody>" +
    "<tr><td ></td><td></td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr>" +
    "</tbody>" +
    "</table>";

var $html_table = $(html_table);
var first_column= $html_table.find('???');
var second_column= $html_table.find('???');

So i have above table in javascript and using jquery to get the first and third columns. But find() method doesn't seem to be flexible enough to get first and third column inside tbody element

• javascript
• jquery
• html
• angularjs
• jquery-selectors

Share Follow asked Aug 10, 2016 at 20:01 josh_boazjosh_boaz 2,02377 gold badges3535 silver badges7474 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

You can get the column using .eq function.

$html_table.find('tbody tr td').eq(0) // First element
$html_table.find('tbody tr td').eq(2) // third element

In eq function, use the index, that starting with 0.

You can get access to all td of column with next code:

var columnNumber = 0; //first column
$.each($html_table.find("tr"), function(){
  var tdOfCurrentColumn = $(this).children().eq(columnNumber);
})

Let's say your table has id="table". You can do this:

var first_column = $('#table:first-child');
var second_column = $('#table:nth-child(2)');

I haven't tried this out, but it should work. Feel free to utilize css3 selectors in all their magnificent glory.

From Chris, I think it is easier using the CSS3 selectors.

var first_column= $("tbody td:nth-child(1)",$html_table)
var second_column=  $("tbody td:nth-child(2)",$html_table)

check this out. https://jsfiddle/nvg4f2at/1/