如何选择表格中的列

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

参见演示。

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

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

参见演示。

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 类

Answer 5

您还可以用两行 JavaScript 执行以下操作：

var idx = document.querySelector('tr').innerText.split('\t').indexOf('name B')+1;
var colArr = [...document.querySelectorAll('th:nth-child('+idx+'),td:nth-child('+idx+')')].forEach(el => el.classList.add('gotcha'))

td,th
{
  border: 1px solid black;
}
.gotcha
{
  background:yellow;
}

<table>
<tr>
    <th>name A</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>

说明： 在 JavaScript 代码的第一行中， split() 函数从第一行的元素创建一个数组，并用制表符将它们分开，并获取您感兴趣的第一个 innerText 字符串所在的索引（如果有），否则返回-1.

因为 JavaScript 数组是从 0 开始的，而 css 中的表格列是从 1 开始的，所以我们在 idx 上添加 +1 以获得正确的列索引

在 JavaScript 代码的第二行中，querySelectorAll 选择 idx 单元索引处的 th 和 td 元素，返回 HTML 节点列表或集合，我们借助展开语法将其转换为类似数组的对象 [...object ]因此可以使用forEach方法。

因此，我们向 forEach 传递一个箭头函数，并使用该代码向同一列的所有单元格添加一个类，以更好地显示选择的结果。 当然，如果您要查找的字符串位于任何 innerText 中，则相同的代码可以工作。

如果代码没有找到任何带有 name B 的 th，indexOf 将返回 -1 并且不会格式化任何内容，因为 idx 将为 0，并且 querySelectorAll 将返回一个空 NodeList，因为 idx 值将超出单元格索引范围。因此，不会选择任何内容，也不会将其格式化为黄色。

您可以将 name B 字符串移动到另一个元素或将其完全删除以查看相对结果。