Geek asks and answers

Use jquery to dynamically count table columns diagonally

Hello colleagues,

I am looking for a way to populate a pre-built dynamic empty table with numbering (and, if possible, coloring) as follows:

5x5 grid
As you can see, the numbering is ascending diagonally. I know that there is probably a way to calculate a number based on the td index of the tables, but I canโ€™t figure out how to do this for each column diagonally. Any help would be appreciated.

Update: Give up on my holidays. Thanks to all your smart people for your answers. Since I am sure that you all had to experience neck pain, clients may be, I was told that the specification has changed (again). In this case, I had to put the grid / matrix into the database and output it using the pivot table. Each square must be color coded.

Nothing is going to be spent, although I learned a lot of great new javascript / jquery tricks from your answers that I did not know about before, so thanks, and I will definitely pay for it :)

Here is what I came up with at the end.

custom grid

+5
source share
3 answers

, ", ", , , ( , ), .

, ; , , .

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 , - , . EDIT: , ? , , , ( , i, , ). , , , sq โ€‹โ€‹ , - , . .

, , . , , jQuery .

, , ...

UPDATE - , : http://jsfiddle.net/7NZt3/1/ ( , , ).

+3

fiddle . 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++;
}
+1

Here jsFiddle does what you requested - http://jsfiddle.net/jaspermogg/MzNr8/8/

I took the liberty of making it a bit customizable user; Itโ€™s interesting to see how long the browser should display the 1000x1000 table using this method: -D

Assuming each cell has an identifier [column]x[row], here is the code for filling in the numbers of a square table of side length 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
                }        

            }

        }

}

And here they are intended to color the bugger.

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

Enjoy, huh ?:-)

+1
source

More articles:


All Articles