Как выбрать столбец в таблице

Question

Я получаю таблицы без каких-либо атрибутов css, некоторые столбцы являются необязательными.

<TABLE> 
<TR> 
    <TH>name A(optional)</TH> 
    <TH>name B</TH> 
    <TH>name C</TH> 
</TR> 
<TR> 
    <TD>name 1A(optional)</TD> 
    <TD>name 1B</TD> 
    <TD>name 1C</TD> 
</TR> 
<TR> 
    <TD>name 2A(optional)</TD> 
    <TD>name 2B</TD> 
    <TD>name 2C</TD> 
</TR> 
</TABLE> 

Мне нужно выбрать столбец с именем «имя B», но этот столбец не всегда второй! Поэтому мне нужно выбрать его в соответствии с именем.

В худшем случае в соответствии с идентификатором атрибута в заголовке

<TH id="nameB">name B</TH> 

Answer 1

Вы можете посмотреть в содержимое ячейки, как это:

var ths = document.getElementsByTagName('th'); 
var tds = document.getElementsByTagName('td'); 
var column = []; 
for (var i=0; i<ths.length; i++) { 
    if (ths[i].innerHTML.match(/name \d*B/)) { 
     column.push(ths[i]); 
    } 
} 
for (var i=0; i<tds.length; i++) { 
    if (tds[i].innerHTML.match(/name \d*B/)) { 
     column.push(tds[i]); 
    } 
} 
console.log(column); 

См DEMO.

Или просто соответствовать голову колонки и получить остальные элементы:

var ths = document.getElementsByTagName('th'); 
var trs = document.getElementsByTagName('tr'); 
var column = []; 
for (var i=0; i<ths.length; i++) { 
    if (ths[i].innerHTML.indexOf('name B') !== -1) { 
     var id = i; 
     break; 
    } 
} 
for (var i=0; i<trs.length; i++) { 
    column.push(trs[i].children[id]); 
} 
console.log(column); 

DEMO См.

Answer 2

Если это таблица, в которой вы разрабатываете сами, вы могли бы быть в состоянии добиться прогресса путем изучения столбцов таблицы форматирования, как описано в:

http://www.w3.org/TR/CSS21/tables.html#columns

Смотри также:

http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4.2

Это более продвинутая тема, не часто упоминаемая в книгах по дизайну CSS, заслуживающая внимания.

Answer 3

Если вы хотите экстремальную простое решение без какого-либо бремени CSS вы можете просто применить тот же класс для всех элементов, которые вы хотите выбрать, как это,

<TABLE> 
    <TR> 
     <TH>name A(optional)</TH> 
     <TH class="red">name B</TH> 
     <TH>name C</TH> 
    </TR> 
    <TR> 
     <TD>name 1A(optional)</TD> 
     <TD class="red">name 1B</TD> 
     <TD>name 1C</TD> 
    </TR> 
    <TR> 
     <TD>name 2A(optional)</TD> 
     <TD class="red">name 2B</TD> 
     <TD>name 2C</TD> 
    </TR> 
</TABLE> 

И тогда стиль, как вы хотите,

.red { 
    background: red; 
}