Új hozzászólás Aktív témák

• #13421 Sk8erPeter nagyúr Andoidtibi #13418

  Új Válasz 2013-05-13 12:45:53 #13421

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  Sk8erPeter

  nagyúr

  válasz Andoidtibi #13418 üzenetére

  Amit most csinálsz:
  egy <table> elembe 15-ször kiíratod egy <ul>-be az aktuális elemet.
  Ez szintaktikai hiba (meg nem a feladatnak megfelelő): <table> elemen belül ezek lehetnek:
  http://www.w3.org/TR/html-markup/table.html.
  Tehát <table> után jöhet egy <caption>, <colgroup>, <thead>, <tbody> vagy <tfoot> elem, vagy esetleg egyből a <tr> (táblázat sora), ami pedig <td>-(ke)t (táblázat oszlopa) tartalmazhat.
  De <ul> semmiképp sem következhet egyből. Ezenkívül az <ul> elemen belül csak <li> elemek szerepelhetnek.
  Itt van egy egyszerű 3 oszlopos, 3 soros táblázat, a felső sor a fejléc:
  http://jsfiddle.net/JH48Z/

  amit Te szeretnél, annak a kimenete így néz ki szintaktikailag helyesen:
  http://jsfiddle.net/JH48Z/1/
  vagy <tbody> nélkül is jó:
  http://jsfiddle.net/JH48Z/2/

  Na, tehát ennek megfelelően kell kiíratnod, ez az első, amit végig kell gondolnod. Próbáld meg az összes lépést egyesével végiggondolni, akár papírra is leírhatod, ha úgy egyszerűbb (algoritmizálj).
  Először ki kell íratni a <table> elemet (majd a végén, a tartalom bepakolása után le kell zárni). Aztán jön a <tr>, most csak egy sort szeretnél, tehát akkor ezt csak egyszer kell kiíratnod, majd ebbe kerül majd a 3 <td>, a <td>-ken belülre pedig az 5-5 listaelem (<ul><li>...</li></ul>). De hülyebiztosra kell elkészítened a kódot, számítani arra, hogy a tömb elemeinek száma változni fog. Pl. működjön úgy is, ha csak 10 elemed van, meg akkor is, ha 632.
  Most vegyük azt, hogy mindenképp azt szeretnéd, hogy mindig legyen 3 oszlop, és mindig 5 elemet írjon az adott oszlopba, már ha van annyi (ha már nincs annyi, akkor a maradékot pakolja bele az aktuális cellának aktuális listájába).
  Ha tök általánosan akarod megoldani, lesz három ciklusod egymásba ágyazva. Egyikben kiírod a szükséges számú sort (itt most 1, de lehetne jóval több is), a benne lévő ciklusban a szükséges számú cellát (itt 3), az azonbelül lévő ciklusban pedig a listaelemeket íratod ki.
  Amire szükséged lesz, a felső egészrész egyszerű kiszámítására vonatkozó függvény: ceil()

  Egy elég általános megoldás, amit gyorsan bepötyögtem, kipróbáltam, jó:

  $elementsArray = array("Egy","Kettő","Három", "Négy" , "Öt" , "Hat" , "Hét" , "Nyolc" , "Kilenc" , "Tíz", "Alma" , "Dió" , "Mák" ,"Körte" , "Cseresznye"
  , "asd", 'asd', 'qwe', 'retkljwer', 'xycbm'
  );
  
  $nrOfElements = count($elementsArray);
  // szükséges listaelemek száma
  $nrOfNeededListElements = 5;
  // szükséges oszlopok száma
  $nrOfNeededColumns = 3;
  $nrOfNeededRows = ceil($nrOfElements/($nrOfNeededListElements*$nrOfNeededColumns));
  // $nrOfCellsToFill = ceil($nrOfElements/$nrOfNeededListElements);
  $nrOfElementsPrinted = 0;
  echo '<table class="list-items-table">';
  for($row = 0; $row < $nrOfNeededRows; $row++){
  // sor
  echo '<tr>';
  for($cell = 0; $cell < $nrOfNeededColumns; $cell++) {
  // <td>-t mindenképp kiírjuk, üresen is (bár elvileg nem feltétlenül muszáj)
  echo '<td>';
  // akkor írjuk csak ki az <ul>-t, ha szükséges
  if($nrOfElementsPrinted < $nrOfElements) {
  echo '<ul class="list-items">';
  for($i = 0; ($i < $nrOfNeededListElements) && ($nrOfElementsPrinted < $nrOfElements); $i++) {
  echo '<li>';
  echo $elementsArray[$nrOfElementsPrinted];
  echo '</li>';
  $nrOfElementsPrinted++;
  }
  echo '</ul>';
  }
  echo '</td>';
  }
  echo '</tr>';
  }
  echo '</table>';

  Azért jó, hogy általános, mert változtathatod benne ezt a két változót:
  $nrOfNeededListElements = 5;
  $nrOfNeededColumns = 3;

  így az elsővel meghatározhatod, hány listaelemre lesz szükséged (neked most 5 kellett), a másodikkal pedig azt, hogy hány oszlopra van szükséged (itt 3). Ha átállítod másra, úgy is működőképes.

  Itt láthatod, mi lesz a kimenet (egy sorba pakolja, ezzel most nem foglalkoztam, hogy legyen elválasztva a kódban sortöréssel - lásd PHP_EOL):

  http://ideone.com/8wT9m5

  Ergo így fog kinézni, ide bemásoltam a kimenetet:
  http://jsfiddle.net/JH48Z/3/

Új hozzászólás Aktív témák