如何在使用colspan peoprty时获取表头单元格的名称？

时间：2016-09-16 10:23:10

标签： javascript jquery html

这里我希望在点击具有特定类和colspan属性的td时从表中获取标题单元格名称，意味着何时单击具有colspan属性的td，该属性应显示其所涵盖的所有标题单元格名称 像波纹管按扣
enter image description here

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

$('#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

2 个答案:

答案 0 :(得分：2)

使用$(this).attr('colspan')查找td的colspan数，并循环遍历th单元格以获取单元格值。请查看以下代码段以获得更多理解。

$('#example').on('click', ' td.displaydata', '.multiple', function (e) {
  var colspan_number = parseInt($(this).attr('colspan'));
  var prevCells = $(this).prevAll();
  var previousColSpan = 0;
  $.each(prevCells, function() {
    if( $(this).attr('colspan') ) {
      previousColSpan += (parseInt($(this).attr('colspan'))-1);
    }
  });
  
  var total_cells = 1;
  if(parseInt(colspan_number)>0){
    total_cells = colspan_number;
  }
  var rowheaders = '';
  for(var i=0;i<total_cells;i++){
    rowheaders += e.delegateTarget.tHead.rows[0].cells[(this.cellIndex + previousColSpan + i)].innerHTML + "\n";
  }

  alert("headers : \n" + rowheaders);
});
<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>

答案 1 :(得分：2)

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

请注意点击单元格的索引。例如，在row1中，有一个合并的单元格，这算作一个！不是两个！

$('#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>

适用于所有单元格的Alternativ 

$('#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>

相关问题
最新问题