复杂表合并javascript&jquery算法

Complex table merging javascript & jquery algorithm

本文关键字：jquery 算法 amp 合并 javascript 复杂      更新时间：2023-09-26

我有一个非常独特的问题，很难解决。我有一张2 x 3的桌子，安排如下。

 nbsp nbsp_1____2__
1-|_____|____|
2-|_____|____|
3-|_____|____|

数据被填充到表格的单元格中。有时，列或行中的数据可能是相同的。例如，如果（1,1）和（1,2）具有相同的数据。在某些情况下，（1,1）、（1,2）和（1,3）都可以具有相同的数据。如果单元格中的值相同且相邻，则需要合并它们。例如，如果（1,1）和（1,2）的值都为"100"，则这两个单元格将合并。我已经使用jquery手动完成了这项工作，比如：

(1,2).hide();
(1,1).attr("rowspan", "2");

我隐藏（1,2）单元格而不是删除，因为表可以重置为原始的2x3，然后在需要时重新填充。手动操作，效果很好，但我需要一个动态方法。以下是需要完成的总体目标。

  • 如果两个垂直相邻的单元格或其相应列中的三个垂直相邻单元格的值相等，则这些单元格将合并在一起
  • 行单元格，如（1,1）和（2,1），可能有重复的数据，并且永远不会合并
  • 作为参考，兼容合并的单元格组为{（1,1），（1,2）}，{
  • 一次可能发生多个合并。例如：{（1,1），（1,2）}具有相同的数据，而{（2,1），（2,2），（2,3）}有相同的数据。两个组分别合并

我的主要问题是，在不写出所有可能的情况的情况下，我该如何编写一个算法来做到这一点。有人能给我举一个可行的例子吗？我意识到这很复杂，所以请随时提问澄清。非常感谢。这是一个巨大的帮助！

这样？http://jsfiddle.net/4zGvg/适用于任意行/列。

其思想是：我们有values矩阵和span矩阵。span的值为

0=隐藏此单元格

1=正常细胞

x>1=具有行跨度的单元格x

按直接顺序按列迭代，按相反顺序按行迭代。如果某个单元格的值等于它下面的值，则增加该单元格的span并删除下面单元格的span：

for (var col = 0; col < cols; col++) {
    for (var row = rows - 2; row >= 0; row--) {
        if (values[row][col] == values[row + 1][col]) {
            span[row][col] = span[row + 1][col] + 1;
            span[row + 1][col] = 0;
        }
    }
}

完成此操作后，可以使用span生成完整的表，或者显示/隐藏单元格并设置其行跨度属性。

因为它总是2x3，所以你可以粗暴对待它。

http://jsfiddle.net/Csxbf/

var $cells = $("td");
if ($cells.eq(0).text() == $cells.eq(2).text()) {
    if ($cells.eq(2).text() == $cells.eq(4).text()) {
        $cells.eq(2).hide();
        $cells.eq(4).hide();
        $cells.eq(0).attr("rowspan",3);
    } else {
        $cells.eq(2).hide();
        $cells.eq(0).attr("rowspan",2);
    }
} else if ($cells.eq(2).text() == $cells.eq(4).text()) {
    $cells.eq(4).hide();
    $cells.eq(2).attr("rowspan",2);
}

这肯定可以优化，这只是快速和肮脏。您肯定希望保存对单元格的引用，而不是多次调用eq。你必须对第二列做同样的事情。

如果表可以更改大小，则需要在列中的每个单元格上循环，对于每个匹配的范围，隐藏匹配项并设置行跨度。相对容易，但在这里并不真正需要。

相关文章：