1

我有以下代码使用上下文菜单插件将行添加到表中，因此您可以右键单击要在下面添加行的单元格。

(function($){
    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);

appendMe();

function appendMe() {
    $('table.test td').find("em").remove()
    $('table.test td').removeAttr("realCellEq").append(function(){
        return "<em> " + $(this).cellPos().left + "</em>"
    }).attr("realCellEq", function() {
        return $(this).cellPos().left
    });
}

$(function () {
    $.contextMenu({
        selector: 'table.test td',
        items: {
            "addRowBelow": {
                name: "Add Row Below",
                callback: function (key, options) {
                    $(this).parents("tr").after("<tr class='freshAdd'></tr>");
                    $(this).parents("tr").find("td").each( function() {
                        var thisRowSpan = ($(this).attr("rowspan")) ? $(this).attr("rowspan") : 1;
                        if(thisRowSpan > 1) {
                            $(this).attr("rowspan", (parseInt($(this).attr("rowspan"),10)+1));
                        } else {
                            $(this).clone().appendTo("tr.freshAdd");
                        }
                    });
                    $("tr.freshAdd").find("td").html("");
                    $("tr.freshAdd").removeClass("freshAdd");
                    appendMe(); 
                }
            }
        }
    });
});

问题是我无法弄清楚我需要做什么来考虑行跨度。

这是一个 jsfiddle 来解释我的意思。

http://jsfiddle.net/many_tentacles/sqjak/1/

4

2 回答 2

0

你parents("tr")没有针对以前的父母，所以我添加了prev()each() 函数，你可以这样做：

$(this).parent("tr").after("<tr class='freshAdd'></tr>");
$(this).parent("tr").prev().find("td").each( function() {
var thisRowSpan = ($(this).attr("rowspan")) ? $(this).attr("rowspan") : 1;
   if(thisRowSpan > 1) {
      $(this).attr("rowspan", (parseInt($(this).attr("rowspan"),10)+1));
    }
})
$(this).parent("tr").find("td").each( function() {
   var thisRowSpan = ($(this).attr("rowspan")) ? $(this).attr("rowspan") : 1;
   if(thisRowSpan > 1) {
   $(this).attr("rowspan", (parseInt($(this).attr("rowspan"),10)+1));
   } else {
   $(this).clone().appendTo("tr.freshAdd");
   }

工作演示小提琴

于 2013-09-23T13:06:13.443 回答
0

您无法使用新添加的单元格添加新单元格的原因是，这些新添加的单元格包含一个名为的类，该类context-menu-active禁止您编写的添加单元格的函数。

您需要在内部进行一些小改动，callback例如：

$(".context-menu-active").removeClass('context-menu-active');

这将从任何新添加的单元格中删除该类，因此它再次变得可用。

查看更新的小提琴：http: //jsfiddle.net/Q5PgG/

于 2013-09-23T12:32:21.880 回答