Uso jQuery para dinámicamente columnas de la tabla numérica en diagonal

Question

Hola compañeros codificadores,

estoy en busca de encontrar una manera de llenar una tabla en blanco dinámica pre-construidos con numeración (y colorear si es posible), así:

Como puede ver, la numeración es orden ascendente en diagonal. Sé que es probable que haya alguna manera de calcular el número en función del índice td de tablas, pero no puedo entender cómo hacerlo para cada columna en diagonal. Cualquier ayuda sería apreciada.

Actualización: Ok, de regreso de mis vacaciones. Gracias a todos ustedes, personas inteligentes por sus respuestas. Como estoy seguro de que todos ustedes han tenido que experimentar el dolor en el cuello de los clientes, me han dicho que la especificación ha cambiado (nuevamente). Siendo este el caso, he tenido que poner la cuadrícula/matriz en una base de datos y salir utilizando una tabla dinámica. Cada cuadrado debe ser personalizable en color.

Nada va a perder, aunque he aprendido bastantes trucos nuevos Javascript/jQuery ingeniosas de sus respuestas que no sabía antes, así que gracias, y estaré seguro de pagar adelante :)

Esto es lo que se me ocurrió al final.

Answer 1

Este fiddle puebla una tabla existente con números y colores. No está limitado a ser una mesa de 5x5. No entendí la lógica de 15 siendo naranja en lugar de amarillo, por lo que simplemente agrupé las celdas diagonales en regiones de color.

---

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

Dado que dicho "colorear si es posible" Voy a ofrecer una solución de ejemplo que no hace colores del modo que usted desee (lo hace de una manera que he encontrado más fácil de código y más atractivo a la vista) pero que maneja correctamente toda la numeración para diferentes tamaños de mesa.

La siguiente función asume que la tabla ya existe; en this demo He incluido el código que genera una tabla para cualquier tamaño que especifique y luego llama a la función siguiente para hacer la numeración y los colores.

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

Demostración: http://jsfiddle.net/7NZt3/2

La idea general que se me ocurrió fue imaginar un cuadrado doble de grande que cualquiera de los X e Y dimensiones es más grande y luego usar un bucle para crear diagonales desde la izquierda el borde de ese cuadro delimitador sube y gira hacia la derecha, es decir, en el orden en que desea los números. EDITAR: ¿Por qué dos veces más grande que el lado más largo? Porque eso es lo primero que se me vino a la cabeza cuando comencé a codificarlo y funcionó (tenga en cuenta que la variable i que contiene los números que se muestran no se incrementa para las células imaginarias). Ahora que he tenido tiempo para pensar, me doy cuenta de que mi variable sq se puede establecer con precisión en uno menos que el número de filas más las columnas, un número que termina siendo más pequeño para las tablas que no son cuadradas. Código anterior y violín actualizado en consecuencia.

Tenga en cuenta que los colores de fondo se pueden establecer directamente en el primer ciclo, pero en su lugar opté por asignar clases y establecer los bucles para cada clase más tarde.Parecía una buena idea en ese momento porque significaba que las diagonales individuales se podían seleccionar fácilmente en jQuery con un solo selector de clase.

Al explicar exactamente cómo funciona el resto se deja como ejercicio para el lector ...

ACTUALIZACIÓN - Esta versión de la coloración más como usted pidió: http://jsfiddle.net/7NZt3/1/ (en mi opinión no es tan bonita, pero cada uno a su propia).

Answer 3

Aquí hay una jsFiddle que hace lo que solicitó - http://jsfiddle.net/jaspermogg/MzNr8/8/

he tomado la libertad de hacer un poco personalizable por el usuario; es interesante ver cuánto tarda el navegador en procesar una tabla de 1000x1000 con este método :-D

Suponiendo que cada celda tenga una identificación de [column]x[row], aquí están los códigos para cómo completar los números de una tabla cuadrada de longitud lateral 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 
       }   

      } 

     } 

} 

Y aquí están para saber cómo colorear el insecto.

// 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, eh? :-)