复杂的表合并javascript& jquery算法

时间:2012-02-07 18:17:42

标签: javascript jquery html algorithm

我有一个相当独特的问题,我无法解决问题。我有一个2 x 3的桌子,排列如下图所示。

_ 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),(1,3)} ,{(1,2),(1,3)},{(2,1),(2,2)},{(2,1),(2,2),(2,3)},{ (2,2),(2,3)}
  • 一次可以进行多次合并。例如:{(1,1),(1,2)}具有相同的数据,{(2,1),(2,2),(2,3)}具有相同的数据。两个组都是单独合并的。

我的主要问题是,如何在不写出所有可能的情况的情况下编写算法来执行此操作。有人能告诉我一些可行的例子吗?我意识到这很复杂,所以请随意提出问题以便澄清。非常感谢先进。这是一个巨大的帮助!

2 个答案:

答案 0 :(得分:3)

因为它总是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。你必须对第二列做同样的事情。

如果表格可以更改大小,您可能希望循环列中的每个单元格以及匹配的每个范围,隐藏匹配并设置rowspan。相对简单,但这里并不需要。

答案 1 :(得分:3)

喜欢这个? http://jsfiddle.net/4zGvg/ 适用于任意行/列。

这个想法:我们有values矩阵和span矩阵。 span的值为

0 =隐藏此单元格

1 =正常细胞

x> 1 =具有rowspan 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生成完整的表格,或显示/隐藏单元格并设置其行数属性。