javascript - 使用jquery对 Angular 线动态编号表列

Question

各位程序员大家好，

我正在寻找一种方法来用编号(如果可能的话还有着色)填充预建的动态空白表，如下所示:

如您所见，编号是对 Angular 线升序排列的。我知道可能有一些方法可以根据表 td 索引计算数字，但不能完全弄清楚如何对 Angular 对 Angular 线的每一列进行计算。任何帮助将不胜感激。

更新:好的，我假期回来了。感谢所有聪明人的回复。我敢肯定你们都曾经历过客户颈部疼痛，有人告诉我规范已经(再次)改变了。在这种情况下，我不得不将网格/矩阵放入数据库并使用数据透视表输出。每个方 block 的颜色都必须是可定制的。

虽然我从你们的回复中学到了很多我以前不知道的漂亮的新 javascript/jquery 技巧，但没有什么会浪费的，所以谢谢，我一定会付出代价的:)

这是我最后想到的。

Answer 1

鉴于您说“如果可能的话着色”，我将提供一个示例解决方案，它不会按照您想要的方式来处理颜色(它以一种我发现更容易编码且更具吸引力的方式来处理)但是对于不同的表格大小，它确实可以正确处理所有编号。

下面的函数假定表已经存在；在 this demo我包含的代码可根据您指定的大小生成表格，然后调用下面的函数来进行编号和颜色设置。

function numberDiagonally(tableId) {
    var rows = document.getElementById(tableId).rows,
        numRows = rows.length,
        numCols = rows[0].cells.length,
        sq = numRows + numCols - 1,
        d, x, y,
        i = 1,
        dc,
        c = -1,
        colors = ["green","yellow","orange","red"];

    diagonalLoop:
    for (d = 0; d < sq; d++) {
        dc = "diagonal" + d;
        for (y = d, x = 0; y >= 0; y--, x++) {
            if (x === numCols)
                continue diagonalLoop;
            if (y < numRows)
                $(rows[y].cells[x]).html(i++).addClass(dc);
        }
    }
    for (d = 0; d < sq; d++)
        $(".diagonal" + d).css("background-color", colors[c=(c+1)%colors.length]);
}

演示:http://jsfiddle.net/7NZt3/2

我想出的一般想法是想象一个正方形是 x 和 y 维度中较大者的两倍大，然后使用循环从该边界正方形的左边缘向上和向右创建对 Angular 线- 即，按照您想要的数字顺序。 编辑: 为什么是长边的两倍？因为这是我开始编写代码时想到的第一件事并且它起作用了(请注意，保存要显示的数字的变量 i 不会针对虚构的单元格递增)。既然我有时间思考，我意识到我的 sq 变量可以精确地设置为比行数加列数少一 - 对于非正方形来说这个数字最终会更小表。上面的代码和 fiddle 相应地更新了。

请注意，背景颜色可以直接在第一个循环中设置，但我选择分配类并稍后为每个类设置循环。当时看起来是个好主意，因为这意味着可以使用单个类选择器在 jQuery 中轻松选择各个对 Angular 线。

确切地解释其余部分是如何工作的留给读者作为练习...

更新 - 这个版本的着色更像你要求的:http://jsfiddle.net/7NZt3/1/ (在我看来不是很漂亮，但各有各的特色)。