javascript - 使用 colspan 属性时如何获取表头单元格名称？

Question

这里我想在单击具有特定类和 colspan 属性的 td 时从表中获取标题单元格名称，这意味着当我单击具有 colspan 属性的 td 时，该属性应显示它所涵盖的所有标题单元格名称像吼叫声

我有一个代码只返回第一个标题单元格名称，脚本代码如下所示

$('#example').on('click', ' td.displaydata', '.multiple', function (e) {
        var rowheader = e.delegateTarget.tHead.rows[0].cells[this.cellIndex];
        alert("header=" + rowheader.innerHTML);
});

HTML 如下

<table border="1" class="display" id="example">
    <thead>
        <tr>
            <th>Rooms</th>
            <th>08:00-09:00</th>
            <th>09:00-10:00</th>
            <th>10:00-11:00</th>
            <th>11:00-12:00</th>
            <th>12:00-13:00</th>
            <th>13:00-14:00</th>
            <th>14:00-15:00</th>
            <th>15:00-16:00</th>
            <th>16:00-17:00</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td  id="1_4" class="displaysingledata>row1</td>
            <td class="displayMultipledata" colspan="2">
                <span id="id_1_0" class="multiple" draggable="true"></span>
            </td>
            <td  id="1_2" class="displaysingledata"></td>
            <td  id="1_3"></td>
            <td class="displayMultipledata" colspan="2">
               <span id="id_1_4" class="multiple" draggable="true"></span>
            </td>
            <td  id="1_6"></td>
            <td  id="1_7" class="displaysingledata"></td>
            <td  id="1_8"></td>
        </tr>
        <tr>
            <td  id="2_10" class="displaysingledata">row2</td>
            <td  id="2_0"></td>
            <td  id="2_1" class="displaysingledata"></td>
            <td  id="2_2"></td>
            <td  id="2_3"></td>
            <td class="displayMultipledata" colspan="4">
                <span id="id_2_4" class="multiple" draggable="true"></span>
            </td>
            <td  id="2_8"></td>

        </tr>            
    </tbody>
</table>

对于单个单元格，我包含的脚本正在运行，我需要处理涵盖多个标题单元格的 colspan

Answer 1

您可以使用 colspan 来定义您需要的 header 数量。

注意点击单元格的索引。比如第1行，有一个合并单元格，这个算一个!不是两个!

$('#example').on('click', ' td.displaydata', '.multiple', function (e) {
  var colspan = $(this).attr('colspan'),
      index = $(this).index(),
      prevCells = $(this).prevAll(),
      headerTxt = '';
  $.each(prevCells, function() {
    if( $(this).attr('colspan') ) {
      index += ( $(this).attr('colspan') - 1 );
    }
  });
  for(var i=0; i<colspan; i++ ) {
    headerTxt += $('#example thead tr th:eq('+(index+i)+')').text()+"\n";
  }
  alert( headerTxt );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="display" id="example">
    <thead>
        <tr>
            <th>Rooms</th>
            <th>08:00-09:00</th>
            <th>09:00-10:00</th>
            <th>10:00-11:00</th>
            <th>11:00-12:00</th>
            <th>12:00-13:00</th>
            <th>13:00-14:00</th>
            <th>14:00-15:00</th>
            <th>15:00-16:00</th>
            <th>16:00-17:00</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td  id="1_4">row1</td>
            <td class="displaydata " colspan="2">
                <span id="id_1_0" class="multiple" draggable="true"></span>
            </td>
            <td  id="1_2"></td>
            <td  id="1_3"></td>
            <td class="displaydata" colspan="2">
               <span id="id_1_4" class="multiple" draggable="true"></span>
            </td>
            <td  id="1_6"></td>
            <td  id="1_7"></td>
            <td  id="1_8"></td>
        </tr>
        <tr>
            <td  id="2_10">row2</td>
            <td  id="2_0"></td>
            <td  id="2_1"></td>
            <td  id="2_2"></td>
            <td  id="2_3"></td>
            <td class="displaydata" colspan="4">
                <span id="id_2_4" class="multiple" draggable="true"></span>
            </td>
            <td  id="2_8"></td>

        </tr>            
    </tbody>
</table>

适用于所有细胞的替代方法

$('#example').on('click', 'td:not(:first-of-type)', function (e) {
  var colspan = 1,
      index = $(this).index(),
      prevCells = $(this).prevAll(),
      headerTxt = '';
  if( $(this).attr('colspan') ) {
    colspan = $(this).attr('colspan');
  }
  $.each(prevCells, function() {
    if( $(this).attr('colspan') ) {
      index += ( $(this).attr('colspan') - 1 );
    }
  });
  for(var i=0; i<colspan; i++ ) {
    headerTxt += $('#example thead tr th:eq('+(index+i)+')').text()+"\n";
  }
  alert( headerTxt );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="display" id="example">
    <thead>
        <tr>
            <th>Rooms</th>
            <th>08:00-09:00</th>
            <th>09:00-10:00</th>
            <th>10:00-11:00</th>
            <th>11:00-12:00</th>
            <th>12:00-13:00</th>
            <th>13:00-14:00</th>
            <th>14:00-15:00</th>
            <th>15:00-16:00</th>
            <th>16:00-17:00</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td  id="1_4">row1</td>
            <td class="displaydata " colspan="2">
                <span id="id_1_0" class="multiple" draggable="true"></span>
            </td>
            <td  id="1_2"></td>
            <td  id="1_3"></td>
            <td class="displaydata" colspan="2">
               <span id="id_1_4" class="multiple" draggable="true"></span>
            </td>
            <td  id="1_6"></td>
            <td  id="1_7"></td>
            <td  id="1_8"></td>
        </tr>
        <tr>
            <td  id="2_10">row2</td>
            <td  id="2_0"></td>
            <td  id="2_1"></td>
            <td  id="2_2"></td>
            <td  id="2_3"></td>
            <td class="displaydata" colspan="4">
                <span id="id_2_4" class="multiple" draggable="true"></span>
            </td>
            <td  id="2_8"></td>

        </tr>            
    </tbody>
</table>