jQuery найти конкретные столбцы в столбце таблицы в элементе tbody

Question

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('???'); 

Итак, у меня есть над таблицей в javascript и с использованием jquery для получения первого и третьего столбцов. Но метод find() не является достаточно гибким, чтобы получить первую и третью колонку внутри элемента tbody.

Answer 1

Вы можете получить доступ ко всем тд столбика со следующим кодом:

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

Answer 2

Скажем, ваш стол имеет id="table". Вы можете сделать это:

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

Я не пробовал это, но он должен работать. Не стесняйтесь использовать селекторов css3 во всей их великолепной славе.

Answer 3

Вы можете получить столбец, используя функцию .eq.

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

В функции эк, использовать индекс, что, начиная с 0.

Answer 4

От Криса, я думаю, что это проще с помощью селекторов CSS3.

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

проверьте это. https://jsfiddle.net/nvg4f2at/1/