5

嗨，各位程序员，

我正在寻找一种方法来填充预先构建的动态空白表，其中包含编号（如果可能，还包括着色），如下所示：

5x5 网格
如您所见，编号是对角线升序。我知道可能有某种方法可以根据表 td 索引计算数字，但不能完全弄清楚如何对对角线的每一列执行此操作。任何帮助，将不胜感激。

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

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

这就是我最后想出的。

自定义网格

4

3 回答 3

3

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

下面的函数假设表已经存在；在这个演示中，我包含了代码，该代码可以生成您指定的任何大小的表格，然后调用下面的函数来进行编号和颜色。

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 尺寸中较大的一个的两倍大，然后使用循环从该边界正方形的左边缘向上和向右创建对角线 - 即，按照你想要的数字的顺序。编辑：为什么是长边的两倍？因为这是我开始编写代码时首先想到的事情并且它起作用了（请注意，i保存所显示数字的变量不会为虚构单元格增加）。现在我有时间思考了，我意识到我的sq变量可以精确地设置为比行数加上列数小一——对于非方形表来说，这个数字最终会变得相当小。上面的代码和小提琴相应地更新。

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

准确解释其余部分的工作原理留给读者作为练习......

更新 - 这个版本的颜色更像你要求的：http: //jsfiddle.net/7NZt3/1/（在我看来不是那么漂亮，但每个人都有他自己的）。

于 2012-06-23T12:10:01.007 回答
1

这个小提琴用数字和颜色填充现有的表格。它不仅限于 5x5 表。我不明白15橙色而不是黄色的逻辑，所以我只是将对角线单元格分组为颜色区域。

// we're assuming the table exists
var $table = $('table'),
    // cache the rows for quicker access
    $rows = $table.find('tr'),
    // determine number of rows
    _rows = $rows.length,
    // determine number of cells per row
    _cols = $rows.first().children().length,
    // determine total number of cells
    max = _rows * _cols,
    // current diagonal offset (for coloring)
    d = 1,
    // current row
    r = 0,
    // current cell
    c = 0;

for (var i=1; i <= max; i++) {
    // identify and fill the cell we're targeting
    $rows.eq(r).children().eq(c)
        .addClass('d' + d)
        .text(i);

    if (i < max/2) {
        // in the first half we make a "line-break" by 
        // moving one row down and resetting to first cell
        if (!r) {
            r = c + 1;
            c = 0;
            d++;
            continue;
        }
    } else {
        // in the second half our "line-break" changes to
        // moving to the last row and one cell to the right
        if (c + 1 == _cols) {
            c = 1 + r;
            r = _rows -1;
            d++;
            continue;
        }
    }

    r--;
    c++;
}
于 2012-06-23T12:09:44.270 回答
1

这是一个 jsFiddle，可以满足您的要求 - http://jsfiddle.net/jaspermogg/MzNr8/8/

我冒昧地让它有点用户可定制；看看浏览器使用这种方法渲染 1000x1000 表需要多长时间很有趣：-D

假设每个单元格的id[column]x[row]为sidelength

//populate the cells with numbers according to the spec
function nums(){

    var xpos = 0
    var ypos = 0     
    var cellval = 1

        for(i=0;i<2*sidelength;i++){

            if(i >= sidelength){

                ypos = sidelength - 1
                xpos = 1 + i - sidelength
                $('td#' + xpos + 'x' + ypos).text(cellval)
                cellval = cellval + 1        

                while(xpos + 1 < sidelength){
                    ypos = ypos-1
                    xpos = xpos+1
                    $('td#' + xpos + 'x' + ypos).text(cellval)
                    cellval = cellval + 1
                }

            } else {

                ypos = i
                xpos = 0        
                $('td#' + xpos + 'x' + ypos).text(cellval)
                cellval = cellval + 1

                while(!(ypos-1 < 0)){
                    ypos = ypos-1
                    xpos = xpos+1
                    $('td#' + xpos + 'x' + ypos).text(cellval)
                    cellval = cellval + 1
                }        

            }

        }

}

在这里，它们是关于如何给臭虫上色的。

// color the cells according to the spec
function cols(){
        if(+$('td#0x0').text() === 99){
        return false
        } else {
            $('td').each(function(index, element){
                if(+$(this).text() > 22)
                {
                    $(this).attr("bgcolor", "red")
                } 
                if(+$(this).text() <= 22)
                {
                    $(this).attr("bgcolor", "orange")
                }
                if(+$(this).text() <= 14)
                {
                    $(this).attr("bgcolor", "yellow")
                }
                if(+$(this).text() <= 6)
                {
                    $(this).attr("bgcolor", "green")
                }
            })
        }
}

享受吧？:-)

于 2012-06-23T12:47:00.070 回答