उपयोग jQuery के लिए गतिशील रूप से संख्या तालिका स्तंभ तिरछे

Question

हाय साथी कोडर,

मैं एक तरह से नंबर (और यदि संभव हो तो रंग) तो जैसे के साथ पहले से बने गतिशील खाली तालिका भरने के लिए खोजने के लिए देख रहा हूँ:

जैसा कि आप देख सकते हैं कि संख्या क्रमशः आरोही क्रम है। मुझे पता है कि तालिका टीडी इंडेक्स के आधार पर संख्या की गणना करने का शायद कुछ तरीका है लेकिन यह स्पष्ट रूप से नहीं पता कि प्रत्येक कॉलम के लिए यह कैसे किया जाए। किसी भी सहायता की सराहना की जाएगी।

अद्यतन: मेरी छुट्टियों से ठीक है। आपके उत्तरों के लिए आप सभी चालाक लोगों के लिए धन्यवाद। जैसा कि मुझे यकीन है कि आपको गर्दन के ग्राहकों में दर्द का अनुभव करना पड़ता है, मुझे बताया गया है कि spec बदल गया है (दोबारा)। यह मामला है कि मुझे ग्रिड/मैट्रिक्स को एक पिवट तालिका का उपयोग करके डेटाबेस और आउटपुट में रखना पड़ा। प्रत्येक वर्ग को रंगीन ढंग से अनुकूलन होना चाहिए।

कुछ भी नहीं बर्बाद करने के लिए हालांकि मैं, आपकी प्रतिक्रियाओं से काफी कुछ गंधा नए जावास्क्रिप्ट/jQuery चाल सीखा मैं के बारे में पहले पता नहीं था है तो धन्यवाद जा रहा है, और मैं इसे आगे भुगतान करने के लिए :)

सुनिश्चित हो जाएगा

यहां मैं अंत में क्या आया था।

Answer 1

यह 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++; 
} 

Answer 2

आप को देखते हुए कहा, "रंग यदि संभव हो तो" मैं एक उदाहरण के समाधान है कि रंग काफी जिस तरह से आप चाहते हैं (यह एक तरीका है कि मैं कोड के लिए आसान पाया में यह करता है नहीं करता है प्रदान करेंगे और देखने के लिए और अधिक आकर्षक) लेकिन जो अलग-अलग टेबल आकारों के लिए सही ढंग से सभी नंबरों को संभालता है।

नीचे दिया गया कार्य मानता है कि तालिका पहले से मौजूद है; this demo में मैंने कोड शामिल किया है जो आपके द्वारा निर्दिष्ट आकार के लिए एक तालिका उत्पन्न करता है और फिर संख्या और रंग करने के लिए नीचे दिए गए फ़ंक्शन को कॉल करता है।

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 आयामों की जो भी रूप में बड़ा है और फिर बाएं से विकर्णों बनाने के लिए एक पाश का उपयोग किया गया उस बाउंडिंग वर्ग के किनारे ऊपर और दाईं ओर बढ़ते हैं - यानी, क्रम में आप संख्याएं चाहते हैं। संपादित करें: क्यों लंबे समय तक दोगुना बड़ा? क्योंकि यह पहली चीज है जो मेरे सिर में आई जब मैंने इसे कोडिंग करना शुरू किया और यह काम किया (ध्यान दें कि परिवर्तनीय i है जो प्रदर्शित होने वाली संख्याओं को कैप्चररी कोशिकाओं के लिए बढ़ाया नहीं जाता है)। अब जब मेरे पास सोचने का समय है, तो मुझे एहसास हुआ कि मेरा sq वैरिएबल पंक्तियों और स्तंभों की संख्या से कम से कम एक सेट पर सेट किया जा सकता है - एक संख्या जो गैर-वर्ग तालिकाओं के लिए छोटी होती है। उपरोक्त कोड और फिडल तदनुसार अद्यतन किया गया।

ध्यान दें कि पृष्ठभूमि रंग सीधे पहले लूप में सेट किए जा सकते हैं, लेकिन इसके बजाय मैंने कक्षाएं असाइन करने और बाद में प्रत्येक कक्षा के लिए लूप सेट करने का विकल्प चुना।उस समय एक अच्छा विचार की तरह लग रहा था क्योंकि इसका मतलब है कि एकल विकार चयनकर्ता के साथ jQuery में व्यक्तिगत विकर्णों को आसानी से चुना जा सकता है। के रूप में सुंदर नहीं मेरी राय में http://jsfiddle.net/7NZt3/1/ (है, लेकिन करने के लिए प्रत्येक: इस संस्करण रंग अधिक की तरह आप के लिए कहा है -

समझाते हुए काम करता है वास्तव में कैसे आराम पाठक के लिए एक व्यायाम के रूप में छोड़ दिया है ...

अद्यतन उसका अपना)।

Answer 3

यहाँ एक jsFiddle करता है कि आप क्या पूछा के लिए है - http://jsfiddle.net/jaspermogg/MzNr8/8/

मैं इसे बनाने की स्वतंत्रता ले लिया एक छोटा सा उपयोगकर्ता के अनुकूलन; यह देखना दिलचस्प है कि ब्राउज़र को इस विधि का उपयोग करके 1000x1000 तालिका प्रस्तुत करने में कितना समय लगता है :- डी

मानते हैं कि प्रत्येक सेल में [column]x[row] की आईडी है, यहां एक वर्ग तालिका की संख्या को भरने के लिए teh codez हैं साइड लम्बाई 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 
       }   

      } 

     } 

} 

और यहां वे बगर को रंगने के तरीके के लिए हैं।

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

आनंद लें, आह? :-)