utilizzare jQuery per dinamicamente colonne della tabella numero diagonale

Question

Hi there colleghi programmatori,

Sto cercando di trovare un modo per riempire una tabella vuota pre-costruito dinamico con numerazione (e colorare se possibile) in questo modo:

Come si può vedere la numerazione è in ordine crescente in diagonale. So che probabilmente c'è un modo per calcolare il numero basato sulle tabelle td index ma non riesco a capire come farlo per ogni colonna in diagonale. Qualsiasi aiuto sarebbe apprezzato.

Aggiornamento: Ok, ritorno dalle mie vacanze. Grazie a tutti voi persone intelligenti per le vostre risposte. Siccome sono sicuro che tutti voi avete dovuto sperimentare il dolore al collo che i clienti possono essere, mi è stato detto che le specifiche sono cambiate (di nuovo). In questo caso ho dovuto mettere la griglia/matrice in un database e l'output usando una tabella pivot. Ogni quadrato deve essere personalizzabile in base al colore.

Niente sta andando a sprecare anche se ho imparato un bel po 'nifty nuovi trucchi javascript/jquery dalle vostre risposte non sapevo di prima, quindi grazie, e sarò sicuro di pagare in avanti :)

Ecco cosa mi sono inventato alla fine.

Answer 1

Questa fiddle popola una tabella esistente con numeri e colori. Non è limitato ad essere un tavolo 5x5. Non ho capito la logica di 15 come arancione anziché gialla, quindi ho semplicemente raggruppato le celle diagonali in regioni di colore.

---

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

Answer 2

Dato che hai detto "colorare, se possibile," Ti fornire una soluzione ad esempio che non fa i colori del tutto nel modo desiderato (lo fa in un modo che ho trovato più facile da codice e più attraente da guardare) ma che gestisce correttamente tutte le numerazioni per le diverse dimensioni delle tabelle.

La funzione seguente presuppone che la tabella esista già; in this demo ho incluso il codice che genera una tabella a qualsiasi dimensione specificata e quindi chiama la funzione seguente per eseguire la numerazione e i colori.

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

Demo: http://jsfiddle.net/7NZt3/2

L'idea generale mi è venuta è stato quello di immaginare una piazza due volte più grande a seconda di quale delle xey dimensioni è più grande e quindi utilizzare un ciclo per creare diagonali da sinistra bordo di quella casella di delimitazione che si alza e verso destra - cioè, nell'ordine in cui vuoi i numeri. MODIFICA: Perché due volte più grande del lato più lungo? Perché è la prima cosa che mi è venuta in mente quando ho iniziato a codificarlo e ha funzionato (nota che la variabile i che contiene i numeri che vengono visualizzati non viene incrementata per le celle immaginarie). Ora che ho avuto il tempo di pensare, mi rendo conto che la mia variabile sq può essere impostata con precisione su un valore inferiore al numero di righe più le colonne: un numero che diventa piuttosto più piccolo per le tabelle non quadrate. Il codice sopra e il violino sono stati aggiornati di conseguenza.

Si noti che i colori di sfondo potevano essere impostati direttamente nel primo ciclo, ma invece ho optato per assegnare classi e impostare i loop per ogni classe in seguito.Sembrava una buona idea in quel momento perché significava che le singole diagonali potevano essere facilmente selezionate in jQuery con un selettore di classe singola.

spiega esattamente come il resto funziona è lasciato come esercizio per il lettore ...

UPDATE - questa versione fa la colorazione più come hai chiesto: http://jsfiddle.net/7NZt3/1/ (a mio parere non come bella, ma a ciascuno di il suo stesso).

Answer 3

Ecco un jsFiddle che fa quello che avete chiesto - http://jsfiddle.net/jaspermogg/MzNr8/8/

mi sono permesso di rendere un po 'personalizzabile dall'utente; è interessante vedere quanto tempo impiega il browser per eseguire il rendering di una tabella 1000x1000 utilizzando questo metodo :-D

Supponendo che ogni cella abbia un ID di [column]x[row], qui ci sono i codici per come compilare i numeri di una tabella quadrata di lunghezza laterale 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 
       }   

      } 

     } 

} 

Ed eccoli per come colorare il 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") 
       } 
      }) 
     } 
} 

Divertiti, eh? :-)