użyć jQuery dynamicznie kolumny numer tabeli przekątnej

Question

Cześć koledzy koderzy,

Szukam znaleźć sposób, aby wypełnić wstępnie zbudowane dynamiczny pusty stolik z numeracją (i kolorowania jeśli to możliwe) tak:

Jak widać, numeracja jest ułożona w porządku rosnącym po przekątnej. Wiem, że prawdopodobnie istnieje sposób na obliczenie liczby w oparciu o tabele indeksów td, ale nie wiem, jak to zrobić dla każdej kolumny po przekątnej. Każda pomoc będzie doceniona.

Aktualizacja: OK z wakacji. Dziękuję wszystkim mądrym ludziom za odpowiedzi. Ponieważ jestem pewien, że wszyscy musieliście doświadczyć bólu w szyi, którym mogą być klienci, powiedziano mi, że specyfikacja zmieniła się (znowu). W tym przypadku musiałem umieścić siatkę/macierz w bazie danych i wyprowadzać je za pomocą tabeli przestawnej. Każdy kwadrat musi być dostosowywany do koloru.

Nic nie idzie na marne, choć nauczyłem się sporo ładne nowych sztuczek JavaScript/jQuery ze swoimi odpowiedziami nie wiedziałem o wcześniej, więc dzięki, a ja należy zwrócić go do przodu :)

Oto, co wymyśliłem na końcu.

Answer 1

Ten fiddle zapełnia istniejącą tabelę z numerami i kolorami. Nie jest ograniczony do stołu 5x5. Nie rozumiałem, że logika jest raczej pomarańczowa niż żółta, więc po prostu zgrupowałem przekątne komórki w obszary kolorów.

---

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

Biorąc mówiłeś „farbowanie, jeśli to możliwe” będę stanowić przykład rozwiązania, które nie oddaje kolory zupełnie tak, jak chcesz (robi to w sposób, który znalazłem łatwiej kodu i bardziej atrakcyjny do oglądania), ale który obsługuje poprawnie wszystkie numery dla różnych rozmiarów stołów.

Poniższa funkcja zakłada, że ​​tabela już istnieje; w this demo Zawarłem kod, który generuje tabelę do dowolnego podanego rozmiaru, a następnie wywołuje poniższą funkcję, aby wykonać numerację i kolory.

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

ogólny pomysł, że wpadł było wyobrazić kwadrat dwukrotnie większe w zależności od X i Y wymiarów jest większy, a następnie za pomocą pętli tworzyć przekątne z lewej krawędź tego kwadratu granicznego w górę iw prawo - tj. w kolejności, w jakiej chcesz numery. EDYCJA: Dlaczego dwa razy większa niż dłuższa strona? Ponieważ to była pierwsza rzecz, która pojawiła się w mojej głowie, kiedy zacząłem ją kodować i działało (zauważ, że zmienna i, która zawiera liczby, które są wyświetlane, nie jest zwiększana dla komórek urojonych). Teraz, gdy miałem czas pomyśleć, zdaję sobie sprawę, że moja zmienna sq może być ustawiona dokładnie na jedną mniej niż liczba wierszy plus kolumny - liczba, która kończy się raczej mniejszą dla tabel nieprostokątnych. Powyższy kod i odpowiednio zaktualizowane skrzypce.

Należy pamiętać, że kolory tła można ustawić bezpośrednio w pierwszej pętli, ale zamiast tego zdecydowałem się przypisać klasy i ustawić pętle dla każdej klasy później.Wydawało się, że jest to dobry pomysł, ponieważ oznaczało to, że poszczególne przekątne można łatwo wybrać w jQuery z jednym selektorem klasy.

wyjaśniając jak reszta prac jest pozostawiamy jako ćwiczenie dla czytelnika ...

AKTUALIZACJA - ta wersja ma zabarwienie bardziej jak hasła: http://jsfiddle.net/7NZt3/1/ (moim zdaniem nie jest tak ładna, ale każde z nich jego własny).

Answer 3

Oto jsFiddle że robi to, co prosiłeś - http://jsfiddle.net/jaspermogg/MzNr8/8/

Pozwoliłem sobie popełnienia go trochę konfigurowalny przez użytkownika; Interesujące jest to, ile czasu zajmuje przeglądarka, aby renderować tabelę 1000x1000 przy użyciu tej metody: - D

Zakładając, że każda komórka ma identyfikator [column]x[row], oto kodeks jak wpisać liczby kwadratowego stołu o długości boku 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 
       }   

      } 

     } 

} 

I tutaj są, jak pokolorować robala.

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

Ciesz się, co? :-)