即时添加colspan和rowspan在桌面上

我想在表数据上添加colspan或rowspan

情况就像我有一个说5×5的表，我想通过选择说2列来合并列，通过用鼠标选择它们并想要合并。 这很容易，我可以做到这一点，但问题来了

黄色显示colspan（合并）

我尝试做类似的事情

红色显示我想要合并的内容，因此最终输出应该是所有六个单元格合并为1，并且还有许多其他类型的情况可以看出。 所以请指导我继续前进的方法。

Answer 1

你可以这样做，也许不是最优雅但它有效，我希望它适合你：

首先使用属性准备表。

function prepare() { var row = 0; $('table tr').each(function () { var tr = $(this); var curCol = 0; var caught = $(this).data('caught'); $('td', this).each(function (index) { while (caught && caught[curCol]) curCol++; var colspan = $(this).attr('colspan') || 1; var rowspan = $(this).attr('rowspan'); $(this).attr('start', curCol); $(this).attr('end', curCol + colspan - 1); $(this).attr('startrow', row); $(this).attr('endrow', row + rowspan - 1); var next_tr = tr.next(); for (var i = 0; i < rowspan - 1; i++) { var curCaught = next_tr.data('caught') || []; for (var j = curCol; j < curCol + colspan; j++) curCaught[j] = true; next_tr.data('caught', curCaught); next_tr = next_tr.next(); } curCol += colspan; }); row++; }) } 

然后你可以调用这个函数发送它选择的tdies：

 function getBoundingRectangle(tds) { var minCol = tds.min(function(){return $(this).attr('start');}); var maxCol = tds.max(function(){return $(this).attr('end');}); var minrow = tds.min(function(){return $(this).attr('startrow');}); var maxrow = tds.max(function(){return $(this).attr('endrow');}); var rec = $('td').filter(function() { var startRow = $(this).attr('startrow'); var startCol = $(this).attr('start'); var endRow = $(this).attr('endrow'); var endCol = $(this).attr('end'); return (startRow >= minrow && startRow <= maxrow && startCol >= minCol && startCol <= maxCol) || (endRow >= minrow && endRow <= maxrow && endCol >= minCol && endCol <= maxCol); }); if (rec.length == tds.length) { debugger; var first = rec.filter('[start=' + minCol + '][startrow=' + minrow + ']') rec.not(first).remove(); first.attr('colspan', maxCol - minCol + 1); first.attr('rowspan', maxrow - minrow + 1); return rec; } else return getBoundingRectangle(rec); } 

还添加了下一个实用function：

 $.fn.max = function(func) { var arr = this.map(func).toArray(); return Math.max.apply( Math, arr ); }; $.fn.min = function(func) { var arr = this.map(func).toArray(); return Math.min.apply( Math, arr ); }; 

Answer 2

今天我写了一个函数来自动为所选列单元格行

 function rowspan(tableClass, rowClass) { var cellThis, cellPrev, spanning; $("." + tableClass + " ." + rowClass).each(function () { cellThis = $(this); spanning = 0; if (cellPrev) { if ($(cellPrev).html() == $(cellThis).html()) { $(cellThis).remove(); $(cellPrev).prop("rowspan", parseInt($(cellPrev).prop("rowspan")) + 1); spanning = 1; } } if (spanning == 0) { cellPrev = $(this); } }); } 

有一个我的function的例子： http ： //jsfiddle.net/6L25e/