Překleslení tabulky – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Překleslení tabulky – JavaScript, AJAX, jQuery – Fórum – Programujte.comPřekleslení tabulky – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

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

Zdravím,

mám problém s JavaScriptem. Naprogramoval jsem funkci pro JavaScript, který zabarví pozice, které ohrožuje kůň ze své pozice. Ale mám menší problém. Tabulka se neaktualizuje z dat získaných z formuláře HTML. Je zobrazena stále pozice A1. Potřebuji překreslit původní tabulku novou tabulkou. Lze to něják udělat??

Zde je kompletní skript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script type="text/javascript">

function RenderBoard(){
var chessboard = new Array(8);
for(var i = 0; i < 8; i++){
chessboard[i] = new Array(8);
for(var j = 0; j < 8; j++)
chessboard[i][j] = 0;
}

var knightsMoves = [
[ 2, 1],
[ 2, -1],
[ 1, 2],
[ 1, -2],
[-2, 1],
[-2, -1],
[-1, 2],
[-1, -2]
];

// loading position horse from html form
var j = parseInt(document.getElementById('polohaj').value);
var i = parseInt(document.getElementById('polohai').value);

// entry position a chess horse into the array with name "sachovnice"
chessboard[j][i] = 1;

var aux;

// vulnerable position
for(a=knightsMoves.length-1; a>=0; a--){
//auxiliary variables
aux = [j + knightsMoves[a][0], i + knightsMoves[a][1]];
//verify whether the position is on the board
if(aux[0] >= 0 && aux[0] <= 7 && aux[1] >= 0 && aux[1] <= 7){
if( (aux[0] & 1) == (aux[1] & 1)) // white square
chessboard[aux[0]][aux[1]] = 2;
else
chessboard[aux[0]][aux[1]] = 2;
}
}

var defaultCell=document.createElement("td");
defaultCell.style.height = defaultCell.style.width = '44px';

var whiteCell = defaultCell.cloneNode(true);
whiteCell.style.backgroundColor = '#fff';//white

var blackCell = defaultCell.cloneNode(true);
blackCell.style.backgroundColor = '#000';//black

var highlightedCell = defaultCell.cloneNode(true);
highlightedCell.style.backgroundColor = '#ff0';// yellow

// get the reference for the body
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
var div = document.createElement("div");

var cell, row;
var img=document.createElement('img');
img.style.display='block';
img.src='figurky/tmave/kun.png';
// creating all cells
for(i = 0; i <8; i++){
// creates a table row
row = document.createElement("tr");
for (j = 0; j <8; j++) {
// 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
if(chessboard[i][j] == 2)
cell = highlightedCell.cloneNode(true);
else if( (i&1) == (j&1) )
cell = whiteCell.cloneNode(true);
else
cell = blackCell.cloneNode(true);

if(chessboard[i][j] == 1)
cell.appendChild(img);

row.appendChild(cell);
cell.setAttribute('id', 'cb'+i+''+j);
}
// add the row to the end of the table body
tblBody.appendChild(row);
}

// sets the border attribute of tbl to 2;
tbl.setAttribute("border", "2");
div.setAttribute("id","left");

tbl.appendChild(tblBody);
div.appendChild(tbl);
body.appendChild(div);

}





//function dalsifigurky() {
//var polickaj = new Array("0","1","2","3","4","5","6","7");
//var polickai = new Array("0","1","2","3","4","5","6","7");
//var obrazky = new Array("strelec.png","kun.png","kral.png","pesec.png","dama.png","vez.png");
//var pocetfigurek = document.figurky.pocetfigurek.value;

//for(i=1; i> pocetfigurek; i++);
// sourj = polickaj[Math.floor(Math.random()*polickaj.length)];
// souri = polickai[Math.floor(Math.random()*polickai.length)] ;
//if(sourj % 2 == 0) {
// sour = sourj.toString(10) + souri.toString(10);
// var sudecislo = 1
// }
//else {
//sour = sourj.toString(10) + souri.toString(10);
//var lichecislo = 1;
// }

// if(sudecislo == 1) {
// document.getElementById(""+sour+"").style.background = "url(figurky/tmave/"+obrazky[Math.round(Math.random()*(obrazky.length-4))]+")"
// }
// else{
// document.getElementById(""+sour+"").style.background = "url(figurky/svetle/"+obrazky[Math.round(Math.random()*(obrazky.length-4))]+")"
// }
//}*/
</script>

<style type="text/css">
td.hnedykun {
background-image: url('figurky/tmave/kun.png');
border-width: 3px;
border-color: yellow;
border-style: solid;

}
</style>


<style type="text/css">

input.style
{
font-size:20px;
font-family:Arial Black,sans-serif;
font-weight:bold;
font-style:italic;
background-color:#FFFF00;
border-top-style:solid;
border-top-color:#660099;
border-bottom-style:solid;
border-bottom-color:#660099;
border-left-style:solid;
border-left-color:#660099;
border-right-style:solid;
border-right-color:#660099;
}

select {
background-color: yellow;
color: black;
font-size: 20px;
font-family:Arial Black,sans-serif;
font-weight:bold;
font-style:italic;

}



</style>
</head>
<body onLoad="RenderBoard()">
<div align="left">
<p class="podtrzeny"> T A H Y     J E Z D C E</p>
<div align="right">
<form enctype="multipart/form-data" method="post" name="polohakone">
<select name="polohaj">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
<option value="4">E</option>
<option value="5">F</option>
<option value="6">G</option>
<option value="7">H</option>
</select>
<select name="polohai">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
<option value="6">7</option>
<option value="7">8</option>
</select>
<input type="submit" class=style value="Dosaď koně" onclick="RenderBoard()">
</form>

<form name="form">
<input type="button" class=style value="R E S E T" onClick="location.reload(true);">
</form>
</div>
</body>
</html>

Nahlásit jako SPAM
IP: 90.177.22.–
Reklama
Reklama
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, 10 hostů

Podobná vlákna

Tabulky — založil matouch

Tabulky — založil lolik

Update tabulky — založil Pebble

Orámování tabulky — založil Marek

 

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