访问列ID

Question

我有一个包含多行的表。因此，这些行中的e是表标题，并且具有可变的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

在页面加载时映射一个数组，页面加载将遍历那些将ID跨越到其所覆盖的每一列的单元格。

然后使用数据单元格索引访问正确的数据单元

var colIds = []

$('tr.y').children().each(function(){
   var colspan = +($(this).attr('colspan') || 1);
   var id = this.id || '';
   while(colspan){
      colIds.push(id);
      colspan--
   } 
});

// example getting values by cell index to display as text for this demo
$('.cnt').text(function(_,txt){
  return txt + ' - ' + colIds[$(this).index()]
})

console.log('colIds', JSON.stringify(colIds))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border=1>
  <thead>
    <tr class="y">
      <td></td>
      <th id="y2017" colspan="2">2017</th>
      <th id="y2018" colspan="3">2018</th>
    </tr>
  </thead>
  <tbody>
    <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>
  </tbody>
</table>

Answer 2

更好的方法是在跨度行上进行第一次迭代并构建一个数组，以基于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>