表 cellIndex 和 rowIndex 与 colspan/rowspan [英] Table cellIndex and rowIndex with colspan/rowspan

问题描述

我使用了以下提供的答案:

I was using the answer provided in:

我该怎么办找到每个表格单元格的视觉位置"；使用jQuery?

但在这种情况下似乎不起作用:http://jsfiddle.net/TRr6C/9/

But it doesn't seem to work in this case: http://jsfiddle.net/TRr6C/9/

注意 1,3 1,4 和 2,4 应该是 1,4 1,5 和 2,5

Notice the 1,3 1,4 and 2,4 should be 1,4 1,5 and 2,5

有人看到有什么问题吗?

Anyone see whats wrong?

或者考虑到 colspan 和 rowspan，是否有更好的解决方案来从表格单元格中获取 cellIndex 和 rowIndex?

Or is there any better solution to get the cellIndex and rowIndex from a table cell taking into consideration colspan and rowspan?

代码如下:

function getCellLocation(cell) {

    var cols = cell.closest("tr").children("td").index(cell);
    var rows = cell.closest("tbody").children("tr").index(cell.closest("tr"));
    var coltemp = cols;
    var rowtemp = rows;

    cell.prevAll("td").each(function() {
        cols += ($(this).attr("colspan")) ? parseInt($(this).attr("colspan")) - 1 : 0;
    });

    cell.parent("tr").prevAll("tr").each(function() {
        //get row index for search cells
        var rowindex = cell.closest("tbody").children("tr").index($(this));
        // assign the row to a variable for later use
        var row = $(this);
        row.children("td").each(function() {
            // fetch all cells of this row
            var colindex = row.children("td").index($(this));
            //check if this cell comes before our cell
            if (cell.offset().left > $(this).offset().left) {
                // check if it has both rowspan and colspan, because the single ones are handled before
                var colspn = parseInt($(this).attr("colspan"));
                var rowspn = parseInt($(this).attr("rowspan"));
                if (colspn && rowspn) {
                    if(rowindex + rowspn > rows)
                    cols += colspn;                    
                }
            }

        });
    });

    return {
        rows: rows,
        cols: cols
    };
}

推荐答案

我的解决方案是 jQuery 插件的形式，因为我可以想象拥有这些信息的目的不止一个.它可以用于:

My solution is in form of jQuery plugin since I can imagine more than one purpose of having this information. It can be used as in:

$("table tbody td").each(function(){ 
    $(this).text( $(this).cellPos().top +","+ $(this).cellPos().left );
});

位置的形式为{top:rows, left:cols}.在第一次调用时，表被扫描并且 TD 元素获取 data 项及其缓存位置.(可以通过使用参数 true 调用来重建缓存).所有进一步的调用都只返回缓存的值.

The position is in form of { top: rows, left: cols }. On its first call, table is scanned and TD elements get data items with their cached position. (Cache can be rebuilt by calling with argument true). All further calls just return that cached value.

希望这有帮助！

jsfiddle

完整来源:

/*  cellPos jQuery plugin
    ---------------------
    Get visual position of cell in HTML table (or its block like thead).
    Return value is object with "top" and "left" properties set to row and column index of top-left cell corner.
    Example of use:
        $("#myTable tbody td").each(function(){ 
            $(this).text( $(this).cellPos().top +", "+ $(this).cellPos().left );
        });
*/
(function($){
    /* scan individual table and set "cellPos" data in the form { left: x-coord, top: y-coord } */
    function scanTable( $table ) {
        var m = [];
        $table.children( "tr" ).each( function( y, row ) {
            $( row ).children( "td, th" ).each( function( x, cell ) {
                var $cell = $( cell ),
                    cspan = $cell.attr( "colspan" ) | 0,
                    rspan = $cell.attr( "rowspan" ) | 0,
                    tx, ty;
                cspan = cspan ? cspan : 1;
                rspan = rspan ? rspan : 1;
                for( ; m[y] && m[y][x]; ++x );  //skip already occupied cells in current row
                for( tx = x; tx < x + cspan; ++tx ) {  //mark matrix elements occupied by current cell with true
                    for( ty = y; ty < y + rspan; ++ty ) {
                        if( !m[ty] ) {  //fill missing rows
                            m[ty] = [];
                        }
                        m[ty][tx] = true;
                    }
                }
                var pos = { top: y, left: x };
                $cell.data( "cellPos", pos );
            } );
        } );
    };

    /* plugin */
    $.fn.cellPos = function( rescan ) {
        var $cell = this.first(),
            pos = $cell.data( "cellPos" );
        if( !pos || rescan ) {
            var $table = $cell.closest( "table, thead, tbody, tfoot" );
            scanTable( $table );
        }
        pos = $cell.data( "cellPos" );
        return pos;
    }
})(jQuery);

这篇关于表 cellIndex 和 rowIndex 与 colspan/rowspan的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！