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>

我需要选择名称为“name B”的列，但这个列并不总是第二列！所以我需要根据名字选择它。

根据标题

中的id属性，在最坏的情况下

<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;
}

Answer 4

使用这个函数你可以得到传递列索引的列元素：

/**
* 
* @param {Object} table: the table dom selector 
* @param {indexColumn} number: start count with 0 
* @returns Array with the column element selected by index column
*/
function getColumnElementsByIndexColumn(table, indexColumn) {
    const tableRows = table.querySelectorAll("tr");
    let columnElements = [];

    for (row of tableRows) {
        let columnElement = row.children[indexColumn];
        columnElements.push(columnElement);
    }

    return columnElements;
}

问题案例，列索引为1代表第二列）：

<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>
<script>
    const table = document.querySelector("table");
    let secondColumnELements = getColumnElementsByIndexColumn(table, 1);
    console.log(secondColumnELements[0].innerText); // name B
    console.log(secondColumnELements[1].innerText); // name 1B
    console.log(secondColumnELements[2].innerText); // name 2B
</script>

现在，您可以使用 Javascript 在此元素中应用 css 类

如何选择表中的列

4 个答案: