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

Question

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

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

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

Answer 1

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

Answer 2

You can use the colspan to define the number of headers you'll need.

Be aware that the index of the click cell. For example, in row1, there is a merged cell, this counts as one! Not two!

 $('#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 that works on all cells

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