如何在表中选择列

How to select column in a table

本文关键字：选择      更新时间：2023-09-26

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

在最坏的情况下根据header

中的id属性
<TH id="nameB">name B</TH>

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

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

看到演示。

如果这是一个您正在自己设计的表，那么您可以通过学习如下所述的格式化表列来取得进展:

http://www.w3.org/TR/CSS21/tables.html列

参见:

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

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

如果你想要极端简单的解决方案，而不需要任何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;
}

使用这个函数，您可以获得传递列索引的列元素:

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

在两行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()函数从第一行元素中创建一个数组，通过制表符't字符将它们分开，并获取您感兴趣的innerText字符串所在的索引，如果有，则返回-1。

因为JavaScript数组是以0为基础的，而css中的表列是以1为基础的，所以我们给idx加+1来得到正确的列索引

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

因此，我们向forEach传递一个箭头函数，并使用该代码向同一列的所有单元格添加一个类，以更好地显示选择的结果。当然，同样的代码工作，如果你正在寻找的字符串是在任何innerText.

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

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

相关文章：