जावास्क्रिप्ट। टेबल छँटाई

शुभ दिन, खाबरोवचेन।

हो सकता है कि अधिकांश स्थानीय निवासियों के लिए मेरा लेख बहुत उबाऊ और "और इतना समझ में आता है," लेकिन मुझे लगता है कि यह शुरुआती लोगों के लिए उपयोगी होगा।
किसी तरह मुझे टेबल को अलग-अलग कॉलम में छाँटने के काम के साथ सामना करना पड़ा। यह डेटाबेस से लिया गया था, हर बार उन्हें बाहर निकालने के लिए यह लाभहीन था, मैंने जावास्क्रिप्ट का उपयोग करने का फैसला किया।
तालिका में पंक्तियों के अलग-अलग स्टाइल के उपयोग के कारण मामूली कठिनाइयाँ थीं, अर्थात् तालिका के डेटा के आधार पर एक अलग पृष्ठभूमि रंग था।
शैली का उल्लंघन करना असंभव था। कौन रुचि रखते हैं, कृपया, बिल्ली के नीचे।


पृष्ठभूमि पर प्रकाश डाला गया इस प्रकार है:
1) अगर समय <2012 - लाल रंग में बैकलाइट
2) यदि दूरी> 9000 है - बैकलाइट पीला है।
*) बाकी बारी ग्रे के साथ सफेद है।

डेटा डेटाबेस से लिया गया है, php खींचा गया है, अंतिम कॉलम छिपा हुआ है, यह समय UNIX प्रारूप में है, इसके द्वारा "टाइम" कॉलम को सॉर्ट करना आसान है।

हम ऐसे वर्ग को जोड़ते हैं:

var TableSort = function (idTbl, defSortCol, firstRow, classes) { //  ,     ,   0 var curSortCol = defSortCol; //  ,    ,   ,   0 var curImgCol = defSortCol; //    var curSortUp = true; // id ,     var curIdTbl = idTbl; //  ,    ,   0 var numColTr = (firstRow == null) ? 1 : firstRow; //       if (classes == null) { var style = false; } else { var style = true; //  ,    var needClasses = classes[0]; //  ,   var listClasses = classes[1]; } var tbl = document.getElementById(curIdTbl); var allImgs = new Array(); // all imgs-arrow allThs = tbl.getElementsByTagName('tr').item(0).getElementsByTagName('th'); for (i=0; i<allThs.length; i++){ if (allThs.item(i).getElementsByTagName('img') != null) { allImgs[i] = allThs.item(i).getElementsByTagName('img').item(0); } else { allImgs[i] = null; } } var tblData = new Array(); // current data in table //     newCol,     imgCol this.initSort = function (newCol, imgCol) { if (newCol == curSortCol) { //    ,     curSortUp = !curSortUp; } else { //     curSortCol = newCol; curImgCol = (imgCol == null) ? newCol : imgCol; curSortUp = true; } showArrow(); getDataTable(); showSortTable(); if (style) { doStyle(); } }; // show/change arrow function showArrow(){ for (i=0; i<allImgs.length; i++){ if (allImgs[i] != null) { if (i == curImgCol) { allImgs[i].style.visibility = "visible"; if (curSortUp) { allImgs[i].src = "./img/up.png"; } else { allImgs[i].src = "./img/down.png"; } } else { allImgs[i].style.visibility = "hidden"; } } } } // get new data from table function getDataTable() { allTrs = tbl.getElementsByTagName('tr'); for (i=numColTr; i<allTrs.length; i++){ tblData[i-numColTr] = new Array(); for (j=0; j<allTrs[i].getElementsByTagName('td').length; j++) { tblData[i-numColTr][j] = allTrs[i].getElementsByTagName('td').item(j).innerHTML; } if (style) { tblData[i-numColTr][allTrs[i].getElementsByTagName('td').length]=allTrs[i].className; } } tblData.sort(_sort); if (!curSortUp) { tblData.reverse(); } } // rules for sorting function _sort(a1, b1) { var a = a1[curSortCol]; var b = b1[curSortCol]; if (parseFloat(a) && parseFloat(b)) { return parseFloat(a) - parseFloat(b); } else { if (a.toLowerCase() < b.toLowerCase()) { return -1; } else if (a.toLowerCase() > b.toLowerCase()) { return 1; } else { return 0; } } } function showSortTable() { allTrs = tbl.getElementsByTagName('tr'); for (i=numColTr; i<allTrs.length; i++){ for (j=0; j<allTrs[i].getElementsByTagName('td').length; j++) { allTrs[i].getElementsByTagName('td').item(j).innerHTML = tblData[i-numColTr][j]; } if (style) { allTrs[i].className=tblData[i-numColTr][allTrs[i].getElementsByTagName('td').length]; } } } function doStyle(){ allTrs = tbl.getElementsByTagName('tr'); for (i=numColTr; i<allTrs.length; i++){ if (allTrs[i] == null) { continue; } if(needClasses.indexOf(allTrs[i].className) != -1) { continue; } allTrs[i].className = listClasses[(i % listClasses.length)]; } } } 

इस तरह एक वस्तु बनाएँ:

 var infoTblSort = new TableSort("idTbl", 0, 1, [['add', 'edd'],['odd', '']] ); 

वांछित कॉलम के हेडर में काम करने के लिए, इसके जैसा कुछ जोड़ें:

 onclick="infoTblSort.initSort(4,3);" 

इस उदाहरण में, 2 पैरामीटर पारित किए जाते हैं, पहला - जिसके अनुसार सॉर्टिंग जाएगा (इस मामले में, यह एक छिपा हुआ यूनिक्स-टाइम कॉलम है), दूसरा - एक कॉलम जिसमें एक तस्वीर होगी जो पाठ की दिशा को इंगित करती है।

एक उदाहरण यहाँ है ।

यह सब, मुझे आशा है कि मेरा अनुभव किसी के लिए उपयोगी होगा। मैं कुछ भ्रमित कहानी के लिए माफी मांगता हूं, मैं पहली बार एक लेख लिख रहा हूं।
आपका ध्यान देने के लिए धन्यवाद।