我想在表数据上添加 colspan 或 rowspan
情况就像我有一个 5x5 的表格,我想通过用鼠标选择 2 列来合并列并想要合并。这很容易,我可以做到这一点,但是问题出现了
黄色显示 colspan(合并)
我尝试做类似的事情
红色显示了我想要合并的内容,因此最终输出应该是将所有六个单元格合并为 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);
}
还添加下一个实用函数:
$.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 );
};
关于jquery - 在表中动态添加 colspan 和 rowspan,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9109247/