здесь Я хочу получить имя ячейки заголовка из таблицы, когда я нажимаю на td, у которого есть определенный класс и свойство colspan, означает, что когда вы нажимаете на td, у которого есть свойство colspan, которое должно показывать все его имя, заголовочное имя, покрытое им like bellow оснастке
Как получить имя ячейки заголовка таблицы при использовании colspan peoprty?

у меня есть код, который возвращается только первая ячейка заголовка назвать код сценария как ниже

$('#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, которая охватывает несколько ячеек заголовка

источник

2016-09-16 sharepoint2013

Вы можете использовать Colspan, чтобы определить количество заголовков вам нужно.

Помните, что индекс ячейки щелчка. Например, в строке 1 есть объединенная ячейка, это считается одним! Не два!

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

источник

2016-09-16 11:08:02 LinkinTED

am также делает то же самое с одной ячейкой, у которой есть другой класс, такой как $ ('# example'). on ('click', 'td.displaydata', '.single' , function (e) { var rowheader = e.delegateTarget.tHead.rows [0] .cells [this.cellIndex]; alert ("header =" + rowheader.innerHTML); }); этот код не работает, когда у меня есть colspan с некоторыми ячейками в одной строке – sharepoint2013

Что вы имеете в виду, что функция click должна работать на всех ячейках? – LinkinTED

У меня есть td в таблице с разными классами, displaydata clas содержит ячейки, у которых есть colspan, и у меня будет некоторый td, у кого есть другой класс, предположим «test», поэтому, когда я пытаюсь нажать на тест и получить его имя ячейки заголовка, не отображая точное имя ячейки заголовка – sharepoint2013

Использование $(this).attr('colspan') найти 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>

источник

2016-09-16 10:36:27

Нажмите вторую объединенную ячейку в row1 ...;) – LinkinTED

да я просто проверил, что, и здесь применяется одна и та же функция извлечения ячейки ячейки для одной ячейки, но n применяя этот код, он также нарушает этот код – sharepoint2013

Как получить имя ячейки заголовка таблицы при использовании colspan peoprty?

ответ

Alternativ, который работает на все клетки

Смежные вопросы