javascript - 在上一行具有rowspan时,将行添加到 html table below

  显示原文与译文双语对照的内容
0 0

以下代码使用上下文菜单插件向 table 添加行,以便你可以右键单击要添加行 below的单元格。


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

故障是我无法解决我需要做的事情来考虑 rowspans 。

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

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

时间: 原作者:

0 0

使用新添加单元格的原因是,新添加的单元格包含一个名为 context-menu-active的类,不能添加单元格。

你需要做一个小的更改 inside callback,如下所示:


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

这将从新添加的单元中移除类,因此它可以再次使用。

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

原作者:
0 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");
 }

工作演示

原作者:
...