如何知道合并了行或列的html表的真实列和行索引 [英] How to know the real column and row index of a html table with merged row or column

问题描述

请在此处查看演示. http://jsfiddle.net/wgstudio/CqNfZ/2/

Please see a demo here. http://jsfiddle.net/wgstudio/CqNfZ/2/

我想要在html talbe中合并cell(0,0)和cell(1,0)，它可以在常规表上工作.

I want merge cell(0,0) and cell(1,0) in a html talbe, it works on a regular table.

下面的代码.

        function() {
            var table = $("#table1");

            var rowIndex = 0;
            var colIndex = 0;                
            var actionCell =$($(table.children().children()[rowIndex]).children()[colIndex]); //Cell1
            var tr = table.children().children()[rowIndex + 1]; 
            var toBeRemoved = $($(tr).children()[colIndex]);//Cell4
            toBeRemoved.remove();
            rowSpan = toBeRemoved.attr("rowSpan") == undefined ? 1 : parseInt(toBeRemoved.attr("rowSpan"), 10);
            actionCell.attr("rowspan", (actionCell.attr("rowSpan") == undefined ? 1 : parseInt(actionCell.attr("rowSpan"), 10)) + rowSpan);
        }

但是如果表是这样的:

    <table id="table2" style=" width: 100%;">
        <tr>
            <td rowspan="2">cell_1</td>
            <td rowspan="2">cell_2cell_5</td>
            <td>cell_3</td>
        </tr>
        <tr>
            <td>cell_6</td>
        </tr>
        <tr>
            <td>cell_7</td>
            <td>cell_8</td>
            <td>cell_9</td>
        </tr>
    </table>

(0,0)(0,1)是合并的单元格，当我想合并(0,0)"Cell1"和(2,0)"Cell7"时，如何通过js找到"cell 7"代码?

(0,0) (0,1) are merged cells, when I want to merge (0,0)"Cell1" and (2,0)"Cell7", how can I find "cell 7" via js code?

希望我解释清楚.

非常感谢您.

账单

推荐答案

您遇到的主要问题是，一旦将行跨度添加到单元格中，就会抛出行索引.如果行中的某个单元格具有rowspan=3，则同一列中下一个单元格的row index为currentRowIndex + 3.

The main problem you are encountering is that once a rowspan is added to a cell, it throws off row indexing. If a cell in a row has rowspan=3 the row index for the next cell in same column is currentRowIndex + 3.

这是您需要的一个很好的开始.

Here's a pretty good start for what you need.

$("#button2").click(function() {
    /* hard code a cell to start with*/
    var actionCell = $('td:first');

    var toBeRemoved = findNextCell(actionCell);

    combineSpans( actionCell, toBeRemoved)

    /* remove merged*/
    toBeRemoved.remove();

});

function combineSpans( actionCell, toBeRemoved){
    var actionSpans = getCellSpans(actionCell);
    var nextSpans = getCellSpans(toBeRemoved);
    /* add colspan and rowspan for both cells to apply to actionCell*/
    var newSpans = {
        rowspan: actionSpans.rowSpan + nextSpans.rowSpan,
        colspan: actionSpans.colSpan + nextSpans.colSpan
    }
     /* adjust actionCell colspan/rowspan*/
    actionCell.attr(newSpans);

}

function findNextCell($cell) {

    var cellIndex = $cell.index();
    var rowSpan = $cell.attr("rowspan") || 1;
    var rowIndex = $cell.closest('tr').index();
    var nextRow = $cell.closest('table').find('tr').eq(1 * rowSpan + rowIndex);
    return nextRow.find('td').eq(cellIndex);

}


function getCellSpans($cell) {
    var obj = {}
    obj.rowSpan = parseInt($cell.attr("rowspan") || 1, 10);
    obj.colSpan = parseInt($cell.attr("colspan") || 1, 10);
    return obj;

}

演示: http://jsfiddle.net/CqNfZ/7/

编辑:刚刚意识到我的combineSpans逻辑需要修改.一起添加2个单元格colspan会引起问题

EDIT: just realized that my combineSpans logic needs modification. Adding 2 cells colspan together will cause problems

这篇关于如何知道合并了行或列的html表的真实列和行索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！