Javascript 使用jquery动态地按对角线对表列进行编号

大家好，编码员们

我正在寻找一种方法，用编号（如果可能的话，还可以用颜色）填充预构建的动态空白表，如下所示：

正如您所看到的，编号是按对角线的升序排列的。我知道可能有一些方法可以根据td索引表来计算数字，但我不太清楚如何对角计算每一列。任何帮助都将不胜感激

更新：假期结束后返回正常状态。感谢所有聪明人的回复。我确信你们都经历过客户的痛苦，我被告知规范（再次）发生了变化。在这种情况下，我不得不将网格/矩阵放入数据库，并使用透视表输出。每个方块都必须是可定制的颜色

虽然我从您的回复中学到了很多我以前不知道的javascript/jquery新技巧，但没有什么是浪费的，所以谢谢，我一定会继续关注：）

这是我最后想到的

这将使用数字和颜色填充现有表格。它不限于5x5表。我不理解

15

是橙色而不是黄色的逻辑，所以我只是将对角单元格分组到颜色区域中

---

//我们假设该表存在
变量$table=$（'table'），
//缓存行以便更快地访问
$rows=$table.find（'tr'），
//确定行数
_rows=$rows.length，
//确定每行的单元格数
_cols=$rows.first（）.children（）.length，
//确定单元格的总数
最大值=_行*_列，
//当前对角线偏移（用于着色）
d=1，
//当前行
r=0，
//当前单元格
c=0；
对于（var i=1；i如果你说“如果可能，着色”，我将提供一个示例解决方案，该解决方案不完全按照你想要的方式进行着色（它以一种我发现更容易编码、更吸引人的方式进行），但它确实能正确处理不同表大小的所有编号

下面的函数假设该表已经存在；在本文中，我包含了生成一个表的代码，该表的大小由您指定，然后调用下面的函数来进行编号和颜色

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]);
}

函数编号（tableId）{
var rows=document.getElementById（tableId）.rows，
numRows=rows.length，
numCols=行[0].cells.length，
sq=numRows+numCols-1，
d、 x，y，
i=1，
dc，
c=-1，
颜色=[“绿色”、“黄色”、“橙色”、“红色”]；
对角循环：
对于（d=0；d=0；y--，x++）{
如果（x==numCols）
继续对角循环；
如果（y

演示：

我想到的一般想法是，想象一个正方形的大小是x和y维度中较大的两倍，然后使用一个循环从该边界正方形的左边缘向上和向右创建对角线，也就是说，按照您想要的数字顺序。编辑：为什么边长两倍？因为这是f当我开始编码时，我脑海中出现的第一件事是它工作了（请注意，保存显示的数字的变量

I

对于假想的单元格不会递增）.现在我已经有时间思考了，我意识到我的

sq

变量可以精确地设置为比行数加上列数少一个的值-对于非正方形表格，这个值会小得多。上面的代码和fiddle会相应地更新

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

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

---

更新-此版本的颜色更像您所要求的：（在我看来不是很漂亮，但每个人都有自己的风格）。

这里有一个JSFIDLE，可以满足您的要求-

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

假设每个单元格的id为

[column]x[row]

，下面是如何填写边长

边长

的正方形表格的编号的代码

//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
                }        

            }

        }

}

//根据规范用数字填充单元格
函数nums（）{
var xpos=0
var ypos=0
var cellval=1
对于（i=0；i=sidelength）{
ypos=边长-1
xpos=1+i-边长
$（'td#'+xpos+'x'+ypos）.text（cellval）
cellval=cellval+1
而（xpos+1<边长）{
ypos=ypos-1
xpos=xpos+1
$（'td#'+xpos+'x'+ypos）.text（cellval）
cellval=cellval+1
}
}否则{
ypos=i
xpos=0
$（'td#'+xpos+'x'+ypos）.text（cellval）
cellval=cellval+1
而（！（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")
                }
            })
        }
}

//根据规范为单元格着色
函数cols（）{
如果（+$（'td#0x0'）.text（）==99）{
// 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")
                }
            })
        }
}