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

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

使用$(this).attr('colspan')查找td的colspan编号，并循环遍历单元格以获得单元格值。 请检查以下代码段以了解更多信息。

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

您可以使用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>