- Vivo X200 Pro - a kétszázát!
- Android alkalmazások - szoftver kibeszélő topik
- Bővebb Google-támogatást kap sok Garmin óra
- Milyen okostelefont vegyek?
- Hat év támogatást csomagolt fém házba a OnePlus Nord 4
- Redmi Note 10S - egy a sok közül
- Redmi Note 13 Pro 5G - nem százas, kétszázas!
- Telekom mobilszolgáltatások
- A HMD visszalép az USA piacáról
- Samsung Galaxy Watch7 - kötelező kör
Új hozzászólás Aktív témák
-
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):
Ergo így fog kinézni, ide bemásoltam a kimenetet:
http://jsfiddle.net/JH48Z/3/ -
DNReNTi
őstag
válasz
Andoidtibi #13418 üzenetére
Így nézne ki szerintem a legegyszerűbb táblás megoldás, természetesen ez most fixen 3 oszlop 5 sort jelenít meg, 15 elemmel.
Talán kiindulási alapnak jó lesz.
$elemek = array("Egy","Kettő","Három", "Négy" , "Öt" , "Hat" , "Hét" , "Nyolc" , "Kilenc" , "Tíz", "Alma" , "Dió" , "Mák" ,"Körte" , "Cseresznye");
sort($elemek);
$szamlalo = 0;
echo '<table>';
for ($i = 1; $i <= 5; $i++) {
echo '<tr>';
for ($j = 1; $j <= 3; $j++) {
echo '<td>'.$elemek[$szamlalo].'</td>';
$szamlalo++;
}
echo '</tr>';
}
echo '</table>'; -
DNReNTi
őstag
válasz
Andoidtibi #13418 üzenetére
Szia,
Én először eldönteném hogy táblázatba vagy listába akarom kiíratni.
Esetedben talán egyszerűbb a táblázat, viszont szebb megoldás listával, mely megjelenését nem a kiíratás hanem a css határozná meg.Megírom gyorsan a táblást.
Új hozzászólás Aktív témák
- EAFC 25
- Autós topik
- gban: Ingyen kellene, de tegnapra
- Futás, futópályák
- One otthoni szolgáltatások (TV, internet, telefon)
- Bittorrent topik
- Vezetékes FEJhallgatók
- Vivo X200 Pro - a kétszázát!
- Android alkalmazások - szoftver kibeszélő topik
- Folyószámla, bankszámla, bankváltás, külföldi kártyahasználat
- További aktív témák...
- Dell Latitude E6540 Erőmű akár Játékra is.15"6 FHD,I7 4800MQ,HD8790,16GBram,500GB sshd,gyári töltö
- HP ELITEBOOK 855 G8 Ryzen 3 5400U 16gb ram 256ssd FHD IPS Gari
- HP ELITEBOOK 850 G8 i5 1145G7/16GB ram 256ssd/FHD
- Újszerű Lenovo Legion 5 - 15,6"FHD IPS - Ryzen 5 5600H - 16GB - 512GB SSD - RTX 3050 - Win11 -MAGYAR
- ÚJ Lenovo LOQ 15IRX9 - QHD 165Hz - i7-13650HX - 16GB - 1TB - RTX 4060 - Win11 - 3 év garancia
- Új monitor állvány - csak össze lett szerelve
- Telefon felvásárlás!! iPhone 13 Mini/iPhone 13/iPhone 13 Pro/iPhone 13 Pro Max
- BESZÁMÍTÁS! Asus TUF B550M R7 5700X 16GB DDR4 512GB SSD RTX 3060 Ti 8GB Rampage SHIVA FSP 700W
- LG 25GR75FG - E-Sport Monitor - FHD 360Hz 1ms - NVIDIA Reflex + G-sync - AMD FreeSync - HDR 400
- Bomba ár! HP EliteBook 840 G4 - i5-7GEN I 16GB I 256GB SSD I 14" FHD Touch I Cam I W10 I Garancia!
Állásajánlatok
Cég: Promenade Publishing House Kft.
Város: Budapest
Cég: PCMENTOR SZERVIZ KFT.
Város: Budapest