Question

我需要一种基于索引获取列的方法。索引编号来自查找<td>并返回其cellIndex。我想这样做的原因是我可以抓住<col>的类并将其应用到它的所有<td>。每个<td>都需要应用该类，因为我使用了库（List.js），如果个人{{1}我无法进行任何排序/过滤/搜索没有适当标记（不幸的是，如果<td>只有它们，它就不会起作用）。此外，<col>没有添加任何其他属性，如ids，名称等。

<col>

目标是让特定的所有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); }都应用于类，所以如果有其他/更好的方法来做到这一点，那么我欢迎任何。谢谢。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

JavaScript - 从索引

1 个答案: