M56035G M56035G - 2 months ago 6
HTML Question

How to get table header cell's name when am using colspan peoprty?

here I want to get the header cells name from table when am clicking on td who has specific class and colspan property, means when am clicking on td who has colspan property that should show all it's header cells name covered by it
like bellow snap

enter image description here

i have a code that is returning only the first header cell name the script code is as bellow


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



HTML is as bellow


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



for a single cell the script i have included that is working,i need to deal with colspan which covers multiple header cells

Answer

Use $(this).attr('colspan') to find the colspan number for td and iterate loop through th cells to get th cell values. Please check below snippet for more understanding.

$('#example').on('click', ' td.displaydata', '.multiple', function (e) {
  var colspan_number = $(this).attr('colspan');
  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 + 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>