Question

我有以下jsfiddle准备向您展示我的问题

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

Live Demo

基本上我遇到的问题是一个表格列，我在其中分配了行数。

我想获得正确的列索引。

我希望我的小提琴足以解释我的问题： - ）

希望有人可以提供帮助吗？

Answer 1

嗯，我知道你已经通过尝试这个变种得到了答案。它基于计算索引，应该适用于任何单元格。我在jsFiddle中删除了重复的id属性。

$('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中的演示。只想用这种方法解决你的问题=）。

Answer 2

如果页面上有多个表格，那么通过修复colspans，rowspans和问题的问题，这个答案会改进Andrew的帖子。我测试了很多rowpan和colspan配置。

//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 };
};

Answer 3

进行更改 - ＆gt; var myCol = $(this).closest("td").index();替换为var myCol = $(this).closest("td").html();，并且您不能为所有元素使用相同的ID，因此make nochKeinTermin会将其从id更改为class 最后...

<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);
});

具有先前rowspan列的表列索引

3 个答案: