考虑行跨度和列跨度，将表格单元格的索引附加到自身

Question

我想将表格单元格的索引附加到该单元格的文本中。我可以使用标准表格执行此操作，但是当合并单元格时我的代码不起作用。

代码如下：

$("td").each( function() {
    $(this).append($(this).index());
});

这是标准表格的结果：

|---|---|---|---|
| 0 | 1 | 2 | 3 |
|---|---|---|---|
| 0 | 1 | 2 | 3 |
|---|---|---|---|
| 0 | 1 | 2 | 3 |
|---|---|---|---|

以下是包含合并单元格的表格的结果：

|---|---|---|---|
|   | 1 | 2 | 3 |
| 0 |---|---|---|
|   | 0 | 1 | 2 |
|---|---|---|---|
| 0 |   1   | 2 |
|---|---|---|---|

这就是我想要为包含合并单元格的表格实现的目标：

|---|---|---|---|
|   | 1 | 2 | 3 |
| 0 |---|---|---|
|   | 1 | 2 | 3 |
|---|---|---|---|
| 0 |   1   | 3 |
|---|---|---|---|

有什么想法吗？

这是一个小提琴...http://jsfiddle.net/many_tentacles/5PQcF/

Answer 1

一种方法是：

var $highest;
$("table.writeIndex tr").each(function(){
$highest=$('td',this).length;
})
$("table.writeIndex tr").each( function() {
    var $td=$('td',this).length;  
    var count=$td;
    $("td",this).each(function(){
     var attr = $(this).attr('colspan');  
     if(typeof attr !== 'undefined' && attr !== false){
        count=count+parseInt(attr)-1;
         var previous=$(this).prev();
         while(previous.length>0){
         previous.html(previous.html()-1);
         previous=previous.prev();
         }
        $(this).append($highest-count);
        count=count-parseInt(attr);
        }else{
        $(this).append($highest-count);
        count=count-1;
        }
    })
});

工作演示Fiddle

Answer 2

我找到的一个解决方案是来自 this question 使用 cellPos 插件

/*  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);

jQuery(function(){
    $('td').html(function(){
        return $(this).cellPos().left
    })
})

演示：Fiddle

Answer 3

试试这个

$("td").each( function(index) { // use index in function
    $(this).append(index);
});