1

我得到表格，没有任何 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”的列，但此列并不总是第二个！所以我需要根据名字来选择它。

根据标头中的 id 属性，在最坏的情况下

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

4 回答 4

3

您可以像这样查看单元格内容：

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

见演示。

或者简单地匹配列标题并获取其余元素：

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

见演示。

于 2013-06-13T18:34:46.507 回答
1

如果这是您自己设计的表格，您可以通过学习格式化表格列来取得进步，如下所述：

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

也可以看看：

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

这是CSS设计书籍中不常提到的更高级的话题，值得一看。

于 2013-06-13T18:47:50.030 回答
0

如果您想要没有任何 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;
}
于 2013-06-13T19:14:56.643 回答
0

使用此函数，您可以获得传递列索引的列元素：

/**
* 
* @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 类

于 2021-03-19T13:05:25.103 回答