Индекс столбцов таблицы с предыдущими столбцами rowspan

У меня есть следующий jsfiddle, готовый показать вам свою проблему.

`https://jsfiddle.net/rwurzer/no4sefyu/`

Live Demo

В основном проблема у меня есть столбец таблицы, где у меня есть rowspan, назначенный.

Я хочу получить нужный индекс столбца.

Надеюсь, моя скрипка достаточно хороша, чтобы объяснить мою проблему: -)

Надеюсь, что кто-нибудь может помочь?

Ответ 1

Хорошо, я знаю, что у вас уже есть ответ, попробовав этот вариант. Он основан на вычислении индексов и должен работать для любой ячейки. И я удалил дубликаты атрибутов id в jsFiddle.

$('td').click(function(){
    var clickedEl = $(this);
    var myCol = clickedEl.closest("td").index();
    var myRow = clickedEl.closest("tr").index();
    var rowspans = $("td[rowspan]");
    rowspans.each(function () {
        var rs = $(this);
        var rsIndex = rs.closest("tr").index();
        var rsQuantity = parseInt(rs.attr("rowspan"));
        if (myRow > rsIndex && myRow <= rsIndex + rsQuantity - 1) {
            myCol++;
        }
    });
    alert('Row: ' + myRow + ', Column: ' + myCol);
});

Вот демо в jsFiddle. Просто хочу решить вашу проблему с помощью этого подхода =).

Ответ 2

внести изменения → var myCol = $(this).closest("td").index(); заменить на var myCol = $(this).closest("td").html();, и вы не можете иметь одинаковый идентификатор для всех элементов, поэтому nochKeinTermin измените его с id на класс Наконец-то...

<table name="kalender" class="kalender" id="mytable" width="100%" border="0" cellspacing="10">
    <tr>
        <td class="hiddenCell">&nbsp;</td>    
        <td class="hiddenCell" colspan="8">8</td>           
    </tr>                                      
    <tr>   
         <td>Uhrzeit</td>
         <td colspan="8" id="1440367200" class="rightBorder day">Montag, 24.08.2015</td>      
    </tr>
    <tr>
        <td class="uhrzeit">&nbsp;</td>
        <td width="120px" id="mitarbeiter_1">AnBi</td>
        <td width="120px" id="mitarbeiter_2">HeBi</td>
        <td width="120px" id="mitarbeiter_3">JuHa</td>
        <td width="120px" id="mitarbeiter_4">StRi</td>
        <td width="120px" id="mitarbeiter_5">FrWi</td>
        <td width="120px" id="mitarbeiter_7">EvSc</td>
        <td width="120px" id="mitarbeiter_8">JoAr</td>
        <td width="200px" class="rightBorder" id="mitarbeiter_10">GaHa</td>
    </tr>
    <tr>  
        <td id="21600" class="uhrzeit">7:00</td>
        <td rowspan="2" class="terminActiveDoppel" id="11"  title="Patient">1</td>
        <td class="termin droppable nochKeinTermin" style="background:red;">2</td>
        <td class="termin droppable nochKeinTermin">3</td>
        <td class="termin droppable nochKeinTermin">4</td>
        <td class="termin droppable nochKeinTermin">5</td>
        <td class="termin droppable nochKeinTermin">6</td>
        <td class="termin droppable nochKeinTermin">7</td>
        <td class="terminRightBorder droppable nochKeinTermin">8</td>
    </tr>
    <tr>  
        <td id="21600" class="uhrzeit">7:00</td>
        <td class="termin droppable nochKeinTermin" style="background:blue;">2</td>
        <td class="termin droppable nochKeinTermin">3</td>
        <td class="termin droppable nochKeinTermin">4</td>
        <td class="termin droppable nochKeinTermin">5</td>
        <td class="termin droppable nochKeinTermin">6</td>
        <td class="termin droppable nochKeinTermin">7</td>
        <td class="terminRightBorder droppable nochKeinTermin">8</td>
    </tr>
</table>    
<br />
<br />
When I click the red cell it shows column "2" which is correct.
<br />
When I click the blue cell it should also show column "2" but it shows column "1".

и в jquery

$('td.nochKeinTermin').click(function(){
  var myCol = $(this).closest("td").html();
  var myRow = $(this).closest("tr").index();
  alert('Row: ' + myRow + ', Column: ' + myCol);
});