Javascript 如何在dragstart事件中使用colspan属性获取单元格标题名称？

这里我有一个表，它有一些行，其中一些列有colspan属性。在这里，我试图获取特定列下所有这些单元格的单元格标题名称，对于获取单个单元格标题名称，我能够做到这一点，但当存在列，并且在该列中有

标记，以及何时将此

拖动到列中时，我会遇到一个问题。我想获取此列下所有单元格的单元格标题名称
我的HTML如下所示：

<table id="example"><tr>
<td >Row1</td>
<td ></td>
<td class="displaymultipledata" colspan="2">
<span  class="multiple" draggable="true"></span>
</td>
<td ></td>
<td class="displaydata">
<span  class="booked" draggable="true"></span>
</td>
<td></td>
</tr>
<tr>
<td >Row2</td>
<td ></td>
<td></td>
<td ></td>
<td></td>
<td></td>
</tr>
</table>

但是我想用colpsans做同样的事情，我怎么做呢

$('.booked').on("dragstart", function (event) {      
        var dt = event.originalEvent.dataTransfer;
        dt.setData('Text', $(this).attr('id'));   
        var roomName =  $(this).closest('td').parent('tr').find('td:eq(0)').text();          
        var index = $(this).closest('td').index();
        var headerText = $("table th").eq(index).text();
}