Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript][PHP]automatyczne sortowanie zapomocą kodu
Forum PHP.pl > Forum > Przedszkole
dizek
20.02.2015, 09:59:39
Witam , korzystam z takiego oto skryptu :

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Zestawy Weekendowe - test sortowania</title>
  4. <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  5. <script>
  6. jQuery.fn.sortElements = (function(){
  7.  
  8.     var sort = [].sort;
  9.  
  10.     return function(comparator, getSortable) {
  11.  
  12.         getSortable = getSortable || function(){return this;};
  13.  
  14.         var placements = this.map(function(){
  15.  
  16.             var sortElement = getSortable.call(this),
  17.                 parentNode = sortElement.parentNode,
  18.  
  19.                 // Since the element itself will change position, we have
  20.                 // to have some way of storing its original position in
  21.                 // the DOM. The easiest way is to have a 'flag' node:
  22.                 nextSibling = parentNode.insertBefore(
  23.                     document.createTextNode(''),
  24.                     sortElement.nextSibling
  25.                 );
  26.  
  27.             return function() {
  28.  
  29.                 if (parentNode === this) {
  30.                     throw new Error(
  31.                         "You can't sort elements if any one is a descendant of another."
  32.                     );
  33.                 }
  34.  
  35.                 // Insert before flag:
  36.                 parentNode.insertBefore(this, nextSibling);
  37.                 // Remove flag:
  38.                 parentNode.removeChild(nextSibling);
  39.  
  40.             };
  41.  
  42.         });
  43.  
  44.         return sort.call(this, comparator).each(function(i){
  45.             placements[i].call(getSortable.call(this));
  46.         });
  47.  
  48.     };
  49.  
  50. })();
  51.  
  52. jQuery(function ($) {
  53.     $('table.sotrable').sortElements(function(a, b){
  54.         return $(a).data('price') > $(b).data('price') ? -1 : 1;
  55.     });
  56. });
  57. </script>
  58. </head>
  59. <body><center>
  60. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  61. <table width="1000" border="0"><!-- TABELKA GŁÓWNA -->
  62.   <tr>
  63.     <td background="images/.png">
  64.     <table class="sotrable" width="950" height="300" border="0" cellpadding="0" cellspacing="0" data-price="15000" style="opacity:1">
  65.     <tr>
  66.         <td width="9" nowrap colspan="6"><p align="center"><img src="numerki/1.jpg"></td>
  67.  
  68.     </tr>
  69.     <tr>
  70.         <td colspan="3"></td>
  71.         <td rowspan="5" background="images/atrakcje.jpg" width="478" height="18" valign="top">
  72.         <img src="images/atrakcje_nowe/gigantyczne_pilkarzyki_1.jpg"> <!-- GIGANTYCZNE PIŁKARZYKI -->
  73.           <img src="images/atrakcje_nowe/mistrzostwa_w_pilkarzyki.jpg"><!-- MISTRZOSTWA W PIŁKARZYKI -->
  74.         <img src="images/atrakcje_nowe/zjezdzalnia_merlin.jpg"><!-- ZJEZDZALNIA MERLIN -->
  75.         <img src="images/atrakcje_nowe/zamek_do_skakania.jpg"><!-- ZAMEK DO SKAKANIA -->
  76.         <img src="images/atrakcje_nowe/mieka_gora.jpg"><!-- MIEKKA GÓRA -->
  77.         <img src="images/atrakcje_nowe/karuzela.jpg"><!-- KARUZELA -->
  78.         <img src="images/atrakcje_nowe/animacja_zabaw_dla_dzieci.jpg" width="464"><!-- ANIMACJA ZABAW DLA DZIECI -->
  79.         <img src="images/atrakcje_nowe/konferansjer.jpg"><!-- KONFERANSJER -->
  80.         </td>
  81.     </tr>
  82.     <tr>
  83.         <td background="images/tlo_gora.jpg" width="436" height="13"></td>
  84.         <td rowspan="4"></td>
  85.     </tr>
  86.     <tr>
  87.         <td background="images/tabelka_tlo.jpg" width="436" height="19">
  88.                 <table width="430" border="0" align="center" cellspacing="1" valign="top">
  89.   <tr><!-- POCZĄTEK WIERSZA -->
  90.     <td><p align="left">Gigantyczne Piłkarzyki</p></td>
  91.     <td><p align="right"><b>1 800 zł netto</b></p></td>
  92.   </tr><!-- KONIEC WIERSZA -->
  93.    <tr><!-- POCZĄTEK WIERSZA -->
  94.     <td><p align="left">Mistrzostwa w piłkarzyki na 3 stołach</p></td>
  95.     <td><p align="right"><b>2 000 zł netto</b></p></td>
  96.   </tr><!-- KONIEC WIERSZA -->
  97.      <tr><!-- POCZĄTEK WIERSZA -->
  98.     <td><p align="left">Zjeżdżalnia Merlin</p></td>
  99.     <td><p align="right"><b>1 500 zł netto</b></p></td>
  100.   </tr><!-- KONIEC WIERSZA -->
  101.       <tr><!-- POCZĄTEK WIERSZA -->
  102.     <td><p align="left">Zamek do skakania</p></td>
  103.     <td><p align="right"><b>1 200 zł netto</b></p></td>
  104.   </tr><!-- KONIEC WIERSZA -->
  105.     <tr><!-- POCZĄTEK WIERSZA -->
  106.     <td><p align="left">Miękka Góra</p></td>
  107.     <td><p align="right"><b>1 600 zł netto</b></p></td>
  108.   </tr><!-- KONIEC WIERSZA -->
  109.     <tr><!-- POCZĄTEK WIERSZA -->
  110.     <td><p align="left">Karuzela</p></td>
  111.     <td><p align="right"><b>2 300 zł netto</b></p></td>
  112.   </tr><!-- KONIEC WIERSZA -->
  113.        <tr><!-- POCZĄTEK WIERSZA -->
  114.     <td><p align="left">Animacja zabaw dla dzieci</p></td>
  115.     <td><p align="right"><b>3 000 zł netto</b></p></td>
  116.   </tr><!-- KONIEC WIERSZA -->
  117.       <tr><!-- POCZĄTEK WIERSZA -->
  118.     <td><p align="left">Konferansjer z nagłośnieniem</p></td>
  119.     <td><p align="right"><b>1 600 zł netto</b></p></td>
  120.   </tr><!-- KONIEC WIERSZA -->
  121. </table>
  122. </td>
  123.     </tr>
  124.     <tr>
  125.         <td background="images/tlo_dol.jpg" width="436" height="18"></td>
  126.     </tr>
  127.     <tr>
  128.         <td valign="top" align="center">
  129.         <font color="black" size="6"><p align="center">SUMA : 15 000 ZŁ NETTO</p></font>
  130.         </td>
  131.     </tr>
  132.     <tr>
  133.         <td colspan="4" background="images/zajestosc.jpg" width="936" height="32" valign="top" align="center">
  134.         <!-- TEKST DOTYCZĄCY ZAJĘTOŚCI -->
  135.         <font color="black" size="4" face="Verdana"></font></p><!-- TEKST DOTYCZĄCY ZAJĘTOŚCI -->
  136.         <!-- TEKST DOTYCZĄCY ZAJĘTOŚCI -->
  137.         </td>
  138.     </tr>
  139. </table>
  140.     </td>
  141.   </tr>
  142. </table>
  143.     </td>
  144.   </tr>
  145. </table>
  146. </td>
  147. </tr>
  148. </table><!-- TABELKA GŁÓWNA -->
  149. <hr width="1000">
  150. <BR>
  151.  
  152. <table width="1000" border="0"><!-- TABELKA GŁÓWNA -->
  153.   <tr>
  154.     <td background="images/.png">
  155.     <table class="sotrable" width="950" height="300" border="0" cellpadding="0" cellspacing="0" data-price="11400" style="opacity:1">
  156.     <tr>
  157.         <td width="9" nowrap colspan="6"><p align="center"><img src="numerki/2.jpg"></td>
  158.  
  159.     </tr>
  160.     <tr>
  161.         <td colspan="3"></td>
  162.         <td rowspan="5" background="images/atrakcje.jpg" width="478" height="18" valign="top">
  163.         <img src="images/atrakcje_nowe/gigantyczne_pilkarzyki_2.jpg"> <!-- GIGANTYCZNE PIŁKARZYKI -->
  164.           <img src="images/atrakcje_nowe/bramka_celnosciowa.jpg"><!-- BRAMKA CELNOŚCIOWA -->
  165.         <img src="images/atrakcje_nowe/mistrzostwa_w_pilkarzyki.jpg"><!-- MISTRZOSTWA W PIŁKARZYKI -->
  166.         <img src="images/atrakcje_nowe/silomierz_kopacz.jpg"><!-- SIŁOMIERZ KOPACZ -->
  167.         <img src="images/atrakcje_nowe/symulator_surfing.jpg"><!-- SYMULATOR SURFING -->
  168.         <img src="images/atrakcje_nowe/cymbergaj.jpg"><!-- CYMBERGAJ -->
  169.         </td>
  170.     </tr>
  171.     <tr>
  172.         <td background="images/tlo_gora.jpg" width="436" height="13"></td>
  173.         <td rowspan="4"></td>
  174.     </tr>
  175.     <tr>
  176.         <td background="images/tabelka_tlo.jpg" width="436" height="19">
  177.                 <table width="430" border="0" align="center" cellspacing="1" valign="top">
  178.   <tr><!-- POCZĄTEK WIERSZA -->
  179.     <td><p align="left">Gigantyczne Piłkarzyki</p></td>
  180.     <td><p align="right"><b>1 800 zł netto</b></p></td>
  181.   </tr><!-- KONIEC WIERSZA -->
  182.    <tr><!-- POCZĄTEK WIERSZA -->
  183.     <td><p align="left">Bramka celnościowa</p></td>
  184.     <td><p align="right"><b>1 500 zł netto</b></p></td>
  185.   </tr><!-- KONIEC WIERSZA -->
  186.      <tr><!-- POCZĄTEK WIERSZA -->
  187.     <td><p align="left">Mistrzostwa w piłkarzyki na 6 stołach</p></td>
  188.     <td><p align="right"><b>3 200 zł netto</b></p></td>
  189.   </tr><!-- KONIEC WIERSZA -->
  190.       <tr><!-- POCZĄTEK WIERSZA -->
  191.     <td><p align="left">Siłomierz Kopacz</p></td>
  192.     <td><p align="right"><b>1 500 zł netto</b></p></td>
  193.   </tr><!-- KONIEC WIERSZA -->
  194.     <tr><!-- POCZĄTEK WIERSZA -->
  195.     <td><p align="left">Symulator Surfing</p></td>
  196.     <td><p align="right"><b>1 800 zł netto</b></p></td>
  197.   </tr><!-- KONIEC WIERSZA -->
  198.     <tr><!-- POCZĄTEK WIERSZA -->
  199.     <td><p align="left">Cymbergaj</p></td>
  200.     <td><p align="right"><b>1 600 zł netto</b></p></td>
  201.   </tr><!-- KONIEC WIERSZA -->
  202. </table>
  203. </td>
  204.     </tr>
  205.     <tr>
  206.         <td background="images/tlo_dol.jpg" width="436" height="18"></td>
  207.     </tr>
  208.     <tr>
  209.         <td valign="top" align="center">
  210.         <font color="black" size="6"><p align="center">SUMA : 11 400 ZŁ NETTO</p></font>
  211.         </td>
  212.     </tr>
  213.     <tr>
  214.         <td colspan="4" background="images/zajestosc.jpg" width="936" height="32" valign="top" align="center">
  215.         <!-- TEKST DOTYCZĄCY ZAJĘTOŚCI -->
  216.         <font color="black" size="4" face="Verdana"></font></p><!-- TEKST DOTYCZĄCY ZAJĘTOŚCI -->
  217.         <!-- TEKST DOTYCZĄCY ZAJĘTOŚCI -->
  218.         </td>
  219.     </tr>
  220. </table>
  221. </td>
  222. </tr>
[HTML] pobierz, plaintext



Kod ten wyświetla posortowane tabelki według ceny "data-price" , ja tutaj na sztywno przypisałem najwyższej wartości obrazk np. zestaw1.jpg aby przy najwyższej wyświetlonej wartości był właśnie widoczny ten obrazek

problem polega na tym że kwota się będzie zmieniać i chciałbym aby przy najwyższej kwocie obrazki sortowały się od numeru 1,2,3,4,5

może i to ,że chce to zrobić na obrazkach jest problemem , bo w sumie mogło by być tak ,żeby nad tą tabelą która ma najwyższą cenę pojawiał się właśnie tekst zestaw 1
przykład
ZESTAW 1
(tabelka w której kwota jest nawyższa czyli np. 9 900 złnetto)
ZESTAW 2
8 800 ZŁ NETTO
ZESTAW 3
7 000 ZŁ NETTO

to strasznie zagmatwane dziekuję z góry za jakkąkolwiek pomoc ; )
nospor
20.02.2015, 10:11:23
NIE KRZYCZ. Nie ma takiej potrzeby. Popraw proszę tytuł.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.