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

Document.getelementbyId ? – JavaScript, AJAX, jQuery – Fórum – Programujte.comDocument.getelementbyId ? – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 
Hledat
Rozšířené hledání ›
Nejnovější témata ve fóru
21:17, Inzerce FPGA vývojová deska XILINX VIRTEX 5 ML507
20:59, OS - GNU / Linux Ubuntu a OpenSuse
21:47, Offtopic Digitalizace v Česku
10:10, Cinema 4D Export USDC do DaVinci Resolve
16:58, Photoshop Jak odstranit (potlačit) odlesky
10:58, C / C++ Procházení struktury byte o byte?
Stavba Laser Arény
Laser Game Brno

›

Paja2
~ Moderátor
+2
Věrný člen
8. 1. 2008   #1
-
0
-

Mám tabulku a potřebuji, aby po kliknutí do inputu, který je v tabulce se mi změnilo pozadí tabulky, mohl by mi někdo poradit, chtěl jsem to zkusit přes document.getelementbyId, ale nějak mi to nefunguje. Tabulky jsou celkem 4.

Nahlásit jako SPAM
IP: 217.112.165.–
Beduin0
Duch
8. 1. 2008   #2
-
0
-

Myslím, že document.getElementById() je case-sensitive, takže tam mohl být problém. Nebo si taky překontroluj, jestli se ti někde nekříží špatně uvozovky. 

<table id="tabulka"><tr><td>

<input type="text" onclick="document.getElementById('tabulka').style.background='#123456';" />

</td></tr></table>

Nahlásit jako SPAM
IP: 195.113.165.–
Paja2
~ Moderátor
+2
Věrný člen
8. 1. 2008   #3
-
0
-

ještě bych potřeboval poradit jak zjednodušit tento zápis





function oznaceni_polozky_1(){

document.getElementById('polozka1').style.background='#BFCFFF';

document.getElementById('polozka3').style.background='#FFF';

document.getElementById('polozka2').style.background='#FFF';

document.getElementById('polozka4').style.background='#FFF';

}

function oznaceni_polozky_2(){

document.getElementById('polozka2').style.background='#BFCFFF';

document.getElementById('polozka1').style.background='#FFF';

document.getElementById('polozka3').style.background='#FFF';

document.getElementById('polozka4').style.background='#FFF';

}

function oznaceni_polozky_3(){

document.getElementById('polozka3').style.background='#BFCFFF';

document.getElementById('polozka1').style.background='#FFF';

document.getElementById('polozka2').style.background='#FFF';

document.getElementById('polozka4').style.background='#FFF';

}

function oznaceni_polozky_4(){

document.getElementById('polozka4').style.background='#BFCFFF';

document.getElementById('polozka1').style.background='#FFF';

document.getElementById('polozka3').style.background='#FFF';

document.getElementById('polozka2').style.background='#FFF';

}


Po kliknutí se mi zbarví jedna položka ostatní mají být bílé

Nahlásit jako SPAM
IP: 217.112.165.–
Orcslayer0
Stálý člen
8. 1. 2008   #4
-
0
-



function oznaceniPolozky(polozka)

{

var pocitadlo = 1;



while (pocitadlo <= 4)

	{

	if (pocitadlo == polozka)

		{

		document.getElementById('polozka' + pocitadlo).style.background='#BFCFFF';

		} else {

		document.getElementById('polozka' + pocitadlo).style.background='#FFF';

		}

	pocitadlo ++;

	}

}

Nahlásit jako SPAM
IP: 85.70.82.–
Petroff0
Věrný člen
12. 1. 2008   #5
-
0
-

Ještě jednodušeji: 

function oznaceniPolozky(polozka)

{

for (var n=1; n<5;n++) document.getElementById('polozka'+n).style.background=(n==polozka)?'#BFCFFF':'#FFF' 

}

Nahlásit jako SPAM
IP: 89.102.96.–
Petroff0
Věrný člen
12. 1. 2008   #6
-
0
-

Nedalo by se použít toto? 

<html><head><title>4 TABULKY</title>

<script type="text/javascript">

function setBC(e,barva){

if (e.tagName.toLowerCase()!="table") setBC(e.parentNode,barva);

else e.style.background=barva;

}

</script>

</head>

<body>

<table border="1">

<tr><td><input type="text" onfocus="setBC(this,'#BFCFFF')" onblur="setBC(this,'#FFF')" /></td></tr>

<tr><td>TABULKA 1</td></tr>

</table>

<br>

<table border="1">

<tr><td><input type="text" onfocus="setBC(this,'#BFCFFF')" onblur="setBC(this,'#FFF')" /></td></tr>

<tr><td>TABULKA 2</td></tr>

</table>

<br>

<table border="1">

<tr><td><input type="text" onfocus="setBC(this,'#BFCFFF')" onblur="setBC(this,'#FFF')" /></td></tr>

<tr><td>TABULKA 3</td></tr>

</table>

<br>

<table border="1">

<tr><td><input type="text" onfocus="setBC(this,'#BFCFFF')" onblur="setBC(this,'#FFF')" /></td></tr>

<tr><td>TABULKA 4</td></tr>

</table>

</body>

</html>

(zkoušel jsem jen ve FF)

Nahlásit jako SPAM
IP: 89.102.96.–
Orcslayer0
Stálý člen
12. 1. 2008   #7
-
0
-

Případně aby se nemuselo ke každému inputu přisovat událost: 



<script type="text/javascript">

var form = document.getElementById('form').getElementsByTagName('input');



for (inputID in form)

{

input = form[inputID];

if (input.type != "submit")

	{

	input.onblur = function () { this.style.background="#FFF" };

	input.onfocus = function () { this.style.background="#BFCFFF" };

	}	

}

</script>

Případně FF, Opera only (pro dobrý pocit při vypnutí javascriptu :D): 


<style>

input[type="text"]:focus {

background-color: #bfcfff;

}

</style>

Nahlásit jako SPAM
IP: 85.70.82.–
Petroff0
Věrný člen
13. 1. 2008   #8
-
0
-

Šlo by to, ale tyto ovladače zbarví pouze vnitřek vst.pole a ne celou tabulku.
Použil jsem rekurzi neboť nikdy nevíš jak hluboko pod <table> <input>leží . . .

Nahlásit jako SPAM
IP: 89.102.96.–
Petroff0
Věrný člen
14. 1. 2008   #9
-
0
-

To Orcslayer :
[Originální nápad =použít smyčku for(id in elForm) k indexování Ale může to vést k špatně odhalitelným chybám.
Např. u 4položkového pole typu table dostáváme tyto "indexy": tables["0"],tables["1"],tables["2"],tables["3"],tables["length"],tables["item"],tables["namedItem"]
Je spousta možností kdy tables["length"]=4 způsobí chybu běhu i v testovací operaci if(...)... (4 není objekt), natož při volání DOM metody.
Ten tvůj kód if (input.type != "submit") propustí neplatnou hodnotu: input =inputs["length"=4 , input.type=4.type=undefined a (input.type != "submit")=(undefined!="submit)=true pak následuje: 4.onfocus atd
]
Jelikož autor se vůbec o formuláři(ch) nezmínil, připusťme všechny možnosti:
1. no form <=> 4x (input in table)
2. 4(input in table)s in 1form
3. 4x (input in table in form)
4. 4x (input in form in table)
A dodržme požadavek změnit aktivní tabulku pouze při vybrání INPUTu: 

<html><head><style>table {margin:1em}</style></head>

<body>

<form id="form" action="#">

 <table border="1" align="left">

  <tr><td><input type="text" /></td></tr>

  <tr><td><input  type="text" /></td></tr>

  <tr><td>TABULKA 1</td></tr>

  <tr><td><input type="submit" value="Hotovo" /></td></tr>

 </table>

 <table border="1">

  <tr><td><input  type="text" /></td></tr>

  <tr><td><input  type="text" /></td></tr>

  <tr><td>TABULKA 2</td></tr>

  <tr><td><input  type="submit" value="Hotovo" /></td></tr>

 </table>

 <table border="1" align="left">

  <tr><td><input type="text" /></td></tr>

  <tr><td>TABULKA 3</td></tr>

  <tr><td><input  type="submit" value="Hotovo" /></td></tr>

 </table>

 <table border="1">

  <tr><td><input type="text" /></td></tr>

  <tr><td>TABULKA 4</td></tr>

  <tr><td><input  type="submit" value="Hotovo" /></td></tr>

 </table>

</form>

<script type="text/javascript">

 function vybavInputy(table){

    activeTable=activeTable || table;

    var inputs=table.getElementsByTagName("input");

    for (var i in inputs){

      var inp = inputs[i];

      if (inp.type=="text"){

        inp.onfocus = function(){

        if(activeTable!=table)

          {activeTable.style.background=barvaNeaktiv;

           activeTable=table;

           activeTable.style.background=barvaAktiv;}

        }

        inp.onfocus();

      }

    }

 }

 var barvaAktiv   = "#BFCFFF"; /* barva vybrané tabulky */

 var barvaNeaktiv = "#FFFFAA"; /* barva ostatních tabulek */

 var activeTable=null;

 var tables=document.getElementsByTagName("table");

 for(var i=tables.length;i--;) vybavInputy(tables[i])

</script>

</body>

</html>

Tahle moje "zkratka" (sice pozpátku) je spolehlivá: for(var i=tables.length;i--;)

K vyzkoušení i v jiných browserech než FF:

Nahlásit jako SPAM
IP: 89.102.96.–
Orcslayer0
Stálý člen
14. 1. 2008   #10
-
0
-

To Petroff : Jj, fakt, že větší ověřování by tomu rozhodně neškodilo. Jinak ten skript můj samozřejmě padá, bo jsem nějako vypustil z mysli tabulky (víc číst, míň psát, evidentně :X). :)

Nahlásit jako SPAM
IP: 85.70.82.–
 ← Zpět na seznam vláken  ← Zpět do Fóra
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.
-
 Zdrojový kód  Vložit obrázek  Video  Smajlíci
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, 3 hosté

 

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