jquery - 访问列 ID

Question

我有一个包含多行的表。因此，其中的行是表标题并具有可变的 colspan。

我需要能够获取每列的 id。我能够获取行 ID 以及上面的 w 单元格 ID。我不确定如何获取上面具有 colspan 的 id。

$(".cnt").each(function() {
  var ths = $(this);
  var rid = ths.closest("tr").find("th").attr("id"); // row label id
  var ind = ths.index();
  var wid = ths.closest("table").find(".w th:eq("+ind+")).attr("id"); // w col ID
  // var yid = ??? // year column id
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border=1>
  <tr class="y">
    <td></td>
    <th id="y2017" colspan="2">2017</th>
    <th id="y2018" colspan="3">2018</th>
  </tr>
  <tr class="w">
    <td></td>
    <th id="w1">W1</th>
    <th id="w2">W2</th>
    <th id="w3">W3</th>
    <th id="w4">W4</th>
    <th id="w5">W5</th>
  </tr>
  <tr>
    <th id="xyz">XYZ</th>
    <td class="cnt">23</td>
    <td class="cnt">55</td>
    <td class="cnt">4</td>
    <td class="cnt">55</td>
    <td class="cnt">323</td>
  </tr>
</table>

我该怎么做？

Answer 1

更好的方法是第一次迭代跨行并构建一个数组以根据 colspan 值再次链接每列的 id。您还可以通过仅获取一次周行内容来加速脚本。

var years = [];
var weeks = $("table").find('tr.w').children();

// Iteration on year row to build years array
$("table").find('tr.y').children().each(function(index) {
  let colspan = $(this).attr('colspan') || 1;
  
  for (let i = 0; i < colspan; i++) {
    years.push(this.id);
  }
});

$(".cnt").each(function(index) {
  let weekId, yearId;
  let rowId = $(this).parent().find('th').attr('id');
  
  weekId = weeks[index + 1].id;
  yearId = years[index + 1];
  console.log(this.innerHTML, rowId, weekId, yearId);  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border=1>
  <tr class="y">
    <td></td>
    <th id="y2017" colspan="2">2017</th>
    <th id="y2018" colspan="3">2018</th>
  </tr>
  <tr class="w">
    <td></td>
    <th id="w1">W1</th>
    <th id="w2">W2</th>
    <th id="w3">W3</th>
    <th id="w4">W4</th>
    <th id="w5">W5</th>
  </tr>
  <tr>
    <th id="xyz">XYZ</th>
    <td class="cnt">23</td>
    <td class="cnt">55</td>
    <td class="cnt">4</td>
    <td class="cnt">55</td>
    <td class="cnt">323</td>
  </tr>
</table>