Document.getelementbyId ?

Fórum › JavaScript, AJAX, jQuery

Paja2

~ Moderátor

Věrný člen

8. 1. 2008 #1

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.–

Beduin 0

Duch

8. 1. 2008 #2

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

Věrný člen

8. 1. 2008 #3

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



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

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

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

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

Š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

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

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