Autor Zpráva
zeldacz
Profil
Nevěděli byste jak udělat tohle pomocí jazyků: PHP, JavaScript, HTML a CSS:

"Vytvořte jednoduchou stránku, která bude mít 2 formulářová políčka - pro počet řádků a
sloupců - a tlačítko, po jehož stisknutí se vykreslí klasická šachovnice (střídající se černé a
bílé čtverečky) o zadaném počtu řádků a sloupců. Jednotlivá políčka se musí těsně dotýkat."
TomasJ
Profil
Věděli, jde to jednoduše pomocí JS, HTML tabulky a CSS. Máš už nějakou práci hotovou, nebo chceš kompletní řešení bez vlastní snahy?
Poradím ti. Pokud umíš JS, uděláš si cyklus, ve kterém budeš 1. proměnnou používat na střídání barvy (černá/bílá), 2. proměnnou na přidávání řádků a v tomto cyklu bude další cyklus, který bude přidávat sloupce (buňky) v jednotlivých řádcích.
1Pupik1989
Profil
Tak stačí udělat dva inputy s hodnotou a ty vkládat do dvou vnořených cyklů. Pak se akorát zjišťuje, jestli je pole sudé, či liché. Tabulce se nastaví cellpadding a cellspacing na 0.

tady něco o tabulkách: Tabulky
TomasJ
Profil
No často se to neděje, nicméně přikládám skoro hotové řešení (bez formuláře pro počet políček), jelikož mě to nějak zaujalo. Je možné, že to jde jednodušeji a kdo to umí jednodušeji, má výhodu a může se pochlubit :)
Kód:
  <script>
  function CreateTable(amount,size,col1,col2)
  {
    var table = document.createElement("table");
    table.cellPadding="0";
    table.cellSpacing="0";
    table.style.cssText = "width:"+(amount*size)+"px;height:"+(amount*size)+"px;";
    var row,col,bgcol;
    for(var r=0,bg=0;r<amount;r++,bg++)
    {
      if(!bg){bgcol=col1;}else{bgcol=col2;bg=-1;}
      row = document.createElement("tr");
      for(var c=0,bg2=0;c<amount;bg2++,c++)
      {
        if(!bg){if(!bg2){bgcol=col1;}else{bgcol=col2;bg2=-1;}}else{if(!bg2){bgcol=col2;}else{bgcol=col1;bg2=-1;}}
        col = document.createElement("td");
        col.style.cssText = "width:"+size+"px;height:"+size+"px;background-color:"+bgcol+";";
        row.appendChild(col);
      }
      table.appendChild(row);
    }
    document.body.appendChild(table);
  }
  </script>

Používá se to tak, že se zavolá tato funkce s následujícími parametry:
CreateTable(X,Y,COL1,COL2);

Kde:
X je počet políček na výšku (ten samý se nastaví i na šířku - tzn. že z šachovnice bude vždy čtverec),
Y je šířka a výška jednotlivých políček (v pixelech),
COL1 je barva 1. políčka,
COL2 je barva 2. políčka.
X a Y se udávají jen jako číslo (ne v uvozovkách ani v apostrofech), COL1 a COL2 se udávají v uvozovkách nebo apostrofech.
meris
Profil
Tomáš: tvé řešení vygeneruje šachovnici, která bude mít stejný počet řádků a sloupců.

 
<script>
  function CreateTable(pocet_radku, pocet_sloupcu,col1,col2)
  {
    var result ="<table cellspacing=0 cellpading=0>";
    var radek = 0, sloupec = 0;
    var color = new Array(col1,col2); // barvy si vlozim do pole ( nebo jako parametr v poli predam) 
    var barva;
    while  ( radek < pocet_radku) {
        // zaciname novy radek 
        barva = color[radek%2];
        result += "<tr>";
        
        sloupec = 0;
        while (sloupec < pocet_sloupcu) {
          // novy sloupec
          barva = color[(radek+sloupec)%2]; // vyhnu se podmince pro urceni barvy
          result += "<td  style='width:20px;height:20px;background-color:"+barva +";'></td>";  
          sloupec++;
        }
        
        result += "</tr>";
        radek++;
    }
    
    result +="</table>";
    return result;     
  }
  </script>


použití je pak docela snadné
<script type="text/javascript" >
   document.write(CreateTable(10, 20,"red","blue"));
</script>

nebo pomocí InnerHtml
1Pupik1989
Profil
Já bych to opravdu řešil v PHP, je to omnoho kratší než tu píšete :)
<form action='' method=get>
Vodorovně: <input type=Text name=X><br>
Svisle: <input type=Text name=Y><br>
<input type=submit value='Načti'>
</form>
<?php
if($_GET[X] and $_GET[Y]){
$Table="<table border=0 cellpadding=0 cellspacing=0>";
for($i=1;$i<=$_GET[Y];$i++){
$Table."<tr>";
  for($j=1;$j<=$_GET[X];$j++){
  $BG_color=(($i-$j)%2) ? "black" : "white";
  $Table.="<td style='background-color:$BG_color;width:60px;height:60px'>&nbsp;</td>";
  }
$Table.="</tr>";
}
$Table.="</table>";

echo $Table;
}
?>
Darker
Profil
Navíc je řešení v PHP rychlejší na zobrazení.
kokolino
Profil
1Pupik1989:
otázka mimo témy :
ako by si zistil na, ktorom políčku sa nachádza figúrka ?
1Pupik1989
Profil
kokolino:
Vytáhnu z SQL a zjistim jestli tam ta figurka není.
kokolino
Profil
1Pupik1989,
môžem ti napísať na icq, lebo robím niečo podobné a tiež tam riešim detekciu kvázi "figurky" na šachovnici, že by sme to prebrali kúsok viac
1Pupik1989
Profil
Tak můžeš napsat, ale nevim jak bude čas, dělám svojí onlinovku a jsem teprve u mapy.

Pokud to chceš tak nějak v reálném času bez reloadu stránky, tak mrkni na Ajax + PHP a MySQL. Pokud ne, tak PHP + MySQL.
zeldacz
Profil
Fak všem moc díky
TomasJ
Profil
meris:
Možná, že se se mýlím, ale mám dojem že šachovnice má stejný počet sloupců jako řádků...
A raději upřednostňuji vytváření elementů javascriptem...
zeldacz
Profil
jj máš pravdu ale tohle je spíš skript na to aby se tam střídala ta černá a bílá
zeldacz
Profil
1Pupik1989,
Jakou děláš onlinovku tu chcu vidět
1Pupik1989
Profil
Ukazovat jí nebudu, až u finalovky. Teď jsem si dal oddych a udělal (už dokončuji) piškvorky online. Mě by docela zajímalo k čemu ta šachovnice bude? Že by šachy? Kdyžtak ti pošlu PM na tu hru.
meris
Profil
TomasJ:
V tomto případě se mýlíš, jinak by ve formuláři nebyli políčka i pro řádky i pro sloupce. Vlastně to byl jediný důvod proč jsem psal své řešení. Ale obecně to tak bývá, proto jsem na to upozornil a opravil ve svém řešení.
Já upřednostňuji jiné jazyky jak JS, takže jsem zvolil řešení, které jsem věděl, že v něm neudělám hloupou chybu (přece jen jedna hodina je jedna hodina :) ) a udělal to tak. Jinak je podle mého malinko správnější elementy vytvářet, a pak začlenit, než přístup vygenerovat kód a pak jej někam vložit, jak jsem to udělal já. I když v konečném důsledku se to chová stejně.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0