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

我想将表格单元格的索引附加到该单元格的文本中。我可以用一个标准表来实现这一点，但是当有合并的单元格时，我的代码不起作用

代码如下：

$("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 |
|---|---|---|---|

下面是我希望为具有合并单元格的表实现的功能：

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

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

有什么想法吗

这是一把小提琴

试试这个

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

---

我找到的一个解决方案是使用

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

/*cellPos jQuery插件
---------------------
获取HTML表中单元格的可视位置（或其块，如thead）。
返回值是“top”和“left”属性设置为左上角单元格的行和列索引的对象。
使用示例：
$（“#myTable tbody td”）.each（function（）{
$（this）.text（$（this.cellPos（）.top+”，“+$（this.cellPos（）.left））；
});
*/
（函数（$）{
/*扫描单个表并以{left:x-coord，top:y-coord}的形式设置“cellPos”数据*/
函数扫描表（$table）{
var m=[]；
$table.children（“tr”）。每个（函数（y，行）{
$（行）。子项（“td，th”）。每个（函数（x，单元格）{
变量$cell=$（单元格），
cspan=$cell.attr（“colspan”）| 0，
rspan=$cell.attr（“rowspan”）| 0，
tx，ty；
cspan=cspan？cspan:1；
rspan=rspan？rspan:1；
对于（；m[y]&&m[y][x]；++x）；//跳过当前行中已占用的单元格
对于（tx=x；tx

演示：

一种方法是：

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

---

工作演示

你能添加一个吗？这些给我的结果与我的中间示例相同-我正在尝试获取底部示例…这将生成我的中间示例中显示的结果。。。我在寻找最下面的例子。