I have the following jsfiddle ready to show you my problem
`https://jsfiddle.net/rwurzer/no4sefyu/`
Basically the problem I have is a table column where I have rowspan assigned to.
I want to get the right column index.
I hope my fiddle is good enough to explain my problem :-)
Hope anyone can help?
This answer improves on Andrew's post by fixing issues with colspans, rowspans and problems if multiple tables are on the page. I tested with lots of rowspan and colspan configurations.
//Takes a td/th or any element within and returns the row and column index of the cell taking into account rowspans and colspans
var getTableCellIndexes = function (elm) {
var td = $(elm).closest("td,th");
var col = 0;
td.prevAll().each(function () { col += $(this).prop('colspan'); });
var row = td.closest("tr").index();
var tbody = td.closest('thead,tbody,tfoot');
var rowspans = tbody.find("td[rowspan],th[rowspan]");
rowspans.each(function () {
var rs = $(this);
var rsIndex = rs.closest("tr").index();
var rsQuantity = rs.prop("rowspan");
if (row > rsIndex && row <= rsIndex + rsQuantity - 1) {
var rsCol = 0;
rs.prevAll().each(function () { rsCol += $(this).prop('colspan'); });
if (rsCol <= col) col += rs.prop('colspan');
}
});
return { row: row, col: col };
};
Well, I know that you've already got an answer by try this variant. It's based on calculating indexes and should work for any cell. And I've removed duplicate id attributes in 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);
});
Here is a demo in jsFiddle. Just want to solve your problem with this approach =).
make changes ->
var myCol = $(this).closest("td").index(); replace with var myCol = $(this).closest("td").html(); and you cannot have same id for all elements so make nochKeinTermin change it from id to class
Finally...
<table name="kalender" class="kalender" id="mytable" width="100%" border="0" cellspacing="10">
<tr>
<td class="hiddenCell"> </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"> </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".
and in jquery
$('td.nochKeinTermin').click(function(){
var myCol = $(this).closest("td").html();
var myRow = $(this).closest("tr").index();
alert('Row: ' + myRow + ', Column: ' + myCol);
});
