Doplnění barevných políček šachovnice – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Doplnění barevných políček šachovnice – JavaScript, AJAX, jQuery – Fórum – Programujte.comDoplnění barevných políček šachovnice – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
MaxDJs0
Návštěvník
3. 3. 2010   #1
-
0
-

Zdravím všechny,

měl bych menší prosbu, a to jak místo textového pole

cell is row "+j+", column "+i
dát obrázek barevného pole šachovnice a to tak, aby na každém sudém poli bylo bílé(světlé) políčko a na každém lichém poli bylo černé(tmavé) políčko. Lze to něják udělat??

Děkuji za odpověď


function sachovnice() {

// get the reference for the body
var body = document.getElementsByTagName("body")[0];

// creates a <table> element and a <tbody> element
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");

// creating all cells
for (var j = 0; j < 8; j++) {
// creates a table row
var row = document.createElement("tr");

for (var i = 0; i < 8; i++) {
// Create a <td> element and a text node, make the text
// node the contents of the <td>, and put the <td> at
// the end of the table row
var cell = document.createElement("td");
var cellText = document.createTextNode("cell is row "+j+", column "+i);
cell.appendChild(cellText);
row.appendChild(cell);
}

// add the row to the end of the table body
tblBody.appendChild(row);
}

// put the <tbody> in the <table>
tbl.appendChild(tblBody);
// appends <table> into <body>
body.appendChild(tbl);
// sets the border attribute of tbl to 2;
tbl.setAttribute("border", "2");
}

Nahlásit jako SPAM
IP: 90.177.22.–
Reklama
Reklama
toka0
Stálý člen
4. 3. 2010   #2
-
0
-

Není na tom nic složitého, jen se podívej:

function sachovnice() { 

// get the reference for the body
var body = document.getElementsByTagName("body")[0];

var black = 1;

// creates a <table> element and a <tbody> element
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");

// creating all cells
for (var j = 0; j < 8; j++) {
// creates a table row
var row = document.createElement("tr");

for (var i = 0; i < 8; i++) {
// Create a <td> element and a text node, make the text
// node the contents of the <td>, and put the <td> at
// the end of the table row
var cell = document.createElement("td");

// width and height
cell.style.width = cell.style.height = '100px';

if(black) cell.style.backgroundColor = '#000000';
else cell.style.backgroundColor = '#ffffff';

// invert color, not at the end
if(i != 7) black = !black;

//cell.appendChild(cellText);
row.appendChild(cell);
}

// add the row to the end of the table body
tblBody.appendChild(row);
}

// put the <tbody> in the <table>
tbl.appendChild(tblBody);
// appends <table> into <body>
body.appendChild(tbl);
// sets the border attribute of tbl to 2;
tbl.setAttribute("border", "2");
}


Stačí si jen představit, jak šachovnice vypadá :-)

Nahlásit jako SPAM
IP: 86.61.209.–
Tomáš Kavalek
MaxDJs0
Návštěvník
6. 3. 2010   #3
-
0
-

V Y Ř E Š E N O


Dá se použít proměnná v cyklu for??

var rozmer = document.getElementById('rozmer').value

for (var j = 0; j < rozmer; j++) {
var row = document.createElement("tr");
for (var i = 0; i < rozmer; i++) {
var cell = document.createElement("td");
<form method="post">
<input type="text" id="rozmer" value="8">
<input type="submit" value="Odeslat">


Protože když to takhle udělám tak se mi šachovnice nevykresluje.

Nahlásit jako SPAM
IP: 90.177.22.–
toka0
Stálý člen
12. 3. 2010   #4
-
0
-

Dá.

<html>

<head>
</head>
<body>
<h1>Sachy</h1>
<input id="counter" value="8" />
<input type="button" onclick="sachovnice();" value="Vykresli" />
<script>
function sachovnice() {
// get the reference for the body
var body = document.getElementsByTagName("body")[0];

var black = 0;

// creates a <table> element and a <tbody> element
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");

var rozmer = document.getElementById('counter').value;

// creating all cells
for (var j = 0; j < rozmer; j++) {
// creates a table row
var row = document.createElement("tr");

if(!(rozmer % 2)) black = !black;

for (var i = 0; i < rozmer; i++) {
// Create a <td> element and a text node, make the text
// node the contents of the <td>, and put the <td> at
// the end of the table row
var cell = document.createElement("td");

// width and height
cell.style.width = cell.style.height = '100px';

black = !black;

if(black) cell.style.backgroundColor = '#000000';
else cell.style.backgroundColor = '#ffffff';

//cell.appendChild(cellText);
row.appendChild(cell);
}

// add the row to the end of the table body
tblBody.appendChild(row);
}

// put the <tbody> in the <table>
tbl.appendChild(tblBody);
// appends <table> into <body>
body.appendChild(tbl);
// sets the border attribute of tbl to 2;
tbl.setAttribute("border", "2");
}

sachovnice();
</script>
</body>
</html>

Nahlásit jako SPAM
IP: 86.61.209.–
Tomáš Kavalek
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 24 hostů

Podobná vlákna

Šachovnice — založil Adadfefek

GUI šachovnice — založil JanH

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý