JavaScript - 从索引获取表列

Question

我需要一种方法来根据索引获取列。索引号来自查找 <td>并返回其 cellIndex 。我想这样做的原因是这样我可以捕获 <col>的类并将其应用到其所有 <td> s。每个<td>需要应用类，因为我正在使用库(List.js)，并且如果个人 <td> 我将无法进行任何排序/过滤/搜索没有适当标记(不幸的是，如果只有 <col> 有它们，它就不起作用)。另外，<col>没有添加任何其他属性，如 id、名称等。

function addClassesToCells(table) {
        var col = ;  // hoping to identify col using index here
        var classname = col.className;

        // rest of function
    }

function getIndex() { // test function to find index
    document.addEventListener("click", function (e) {
        e = e || window.event;
        var target = e.target || e.srcElement;
        var td = "TD";

        if (target.tagName == td) {
            console.log(target.cellIndex);
        }

    }, false);
}

目标是获得所有 <td> s 在一个特定的应用类下，所以如果有其他/更好的方法来做到这一点，那么我欢迎任何。谢谢。

Answer 1

要获取列和 td 的列表，请使用查询并匹配索引。

 var table = document.querySelector('table');

 var cols = table.querySelectorAll('col');

 var trs = table.querySelectorAll('tr');

 var tds = [].map.call(trs, tr => tr.querySelectorAll('td'));

 for (var i = 0; i < trs.length; i++) {
   for (var j = 0; j < tds[i].length; j++) {
     tds[i][j].className = cols[j].className;
   }
 }

.a {
  color: red;
}
.b {
  color: blue;
}
.c {
  color: green;
}

<table>
  <colgroup>
    <col class="a" />
    <col class="b" />
    <col class="c" />
  </colgroup>
  <tr>
    <td>Lime</td>
    <td>Lemon</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>