Fellépkedés adott azonosítóig a DOM fán

Anonymous · 2006. Ápr. 18. (K), 10.36

Sziasztok,
olyan problémával küzdök , van több tábla egymásba ágyazva, a belső tábla cellájában van egy gomb ami törli az egyik tábla azt a sorát ahol a gomb van, a kérdésem az hogy a gomb a this.parentNode.. függvénnyel hogy tudom az megcsinálni , hogy az adott ID-vel rendelkező tábláig mennyek fel a DOM fán.
THX.

■

HTML, CSS, JavaScript, Ajax

csirip

Micsoda? :D

tiny · 2006. Ápr. 18. (K), 11.29

ami törli az egyik tábla azt a sorát ahol a gomb van

Nah én konkrétan itt akadtam el a feldolgozásban :) De amúgy ha el akarsz érni egy adott id-jű elemet, akkor document.getElementById('elemidje')...

A hozzászóláshoz regisztráció és belépés szükséges
új téma

nem érthető a kérdés

Hodicska Gergely · 2006. Ápr. 18. (K), 14.52

Valahogy át kéne fogalmaznod a kérdésed, kicsit pontosítanod, meg egy kicsit szigorúbb mondatszerkezeted hasznánod, mert így jelen formában nem igazán érthető, hogy mit is szeretnél. És ezt ne kukacoskodásként fogd fel, hanem a mint a Te érdeked, mert a többség gyakran már fásult az ilyen kérdésektől, és ha első olvasásra nem érthető, akkor ugrik is tovább, ergó rontod az esélyed, hogy megfelelő választ kapj.

Felhő

A hozzászóláshoz regisztráció és belépés szükséges
új téma

DOM

Anonymous · 2006. Ápr. 18. (K), 18.55

------------------------------------------------------------------------------------------
|xxxxxxxxxxxxxxxxx|xxxxxxxxxxxxxxxxxxxxx||-----------------------------||
|xxxx1-es tablaxxxxx|xxxxxxxxxxxxxxxxxxxxx||xxxxxxxxxxxx|xxxxxxx||
|xxxxxxxxxxxxxxxxx|xxxxxxxxxxxxxxxxxxxxx||xx2-es tablaxx|gombxxx||
|xxxxxxxxxxxxxxxxx|xxxxxxxxxxxxxxxxxxxxx||-----------------------------||
------------------------------------------------------------------------------------------
|xxxxxxxxxxxxxxxxx|xxxxxxxxxxxxxxxxxxxxx||-----------------------------||
|xxxx1-es tablaxxxxx|xxxxxxxxxxxxxxxxxxxxx||xxxxxxxxxxxx|xxxxxxx||
|xxxxxxxxxxxxxxxxx|xxxxxxxxxxxxxxxxxxxxx||xx2-es tablaxx|gombxxx||
|xxxxxxxxxxxxxxxxx|xxxxxxxxxxxxxxxxxxxxx||-----------------------------||
------------------------------------------------------------------------------------------
|xxxxxxxxxxxxxxxxx|xxxxxxxxxxxxxxxxxxxxx||-----------------------------||
|xxxx1-es tablaxxxxx|xxxxxxxxxxxxxxxxxxxxx||xxxxxxxxxxxx|xxxxxxx||
|xxxxxxxxxxxxxxxxx|xxxxxxxxxxxxxxxxxxxxx||xx2-es tablaxx|gombxxx||
|xxxxxxxxxxxxxxxxx|xxxxxxxxxxxxxxxxxxxxx||-----------------------------||
------------------------------------------------------------------------------------------

Itt az ábra van 2 db egymásba ágyazott tábla de lehet akár több is, az ábrán a z 1-es táblázat három sora látható ha megnyomom a gombot a 2-es táblában akkor azt szeretném tudni hogy az 1-es tábla hányadik sorában lett a gomb megnyomva.
THX.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Egyszerű

janoszen · 2006. Ápr. 18. (K), 19.37

Megkapod ugye, a megkattintott HTML elemet. Aztán elkezdesz lépegetni a szülejébe, annak a szülejébe, stb rekurzívan, amíg rá nem jössz, hogy egy olyan elemet találtál, ami neked jó.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

DOM

Anonymous · 2006. Ápr. 19. (Sze), 07.08

Ez igy ok ,de amikor lépkedek a szülőkbe felfelé akkor hogy tudom lekérni annak a szülő objecktumnak az ID-jét ahol éppen tartok ez a kérdés ??

A hozzászóláshoz regisztráció és belépés szükséges
új téma

generáláskor megadod

Hodicska Gergely · 2006. Ápr. 18. (K), 21.52

Ha ezt a táblázatot dinamikusan generálod (ilyen esetekben ez többnyire így van), akkor az is megoldás lehet, hogy ha generáláskor a gomb onclick vagy egyéb eseményében már eleve megadod a sor sorszámát. Ez a befoglaló sor is kaphat egy a sorszám alapján származtatható ID-t, és akkor a sorszám birtokában a kezlő függvény egy getElementById segítségével meg tudja szerezni a sorhoz tartozó DOM objektum referenciáját.

Felhő

A hozzászóláshoz regisztráció és belépés szükséges
új téma

DOM

Anonymous · 2006. Ápr. 19. (Sze), 07.13

Nekem olyan kérdésem van , ha csak a táblázatok ID-jét tudom és nincsenek a sorokhoz külön ID-ék rendelve és amikor lépkedek a szülőkbe felfelé akkor hogy tudom lekérni annak a szülő objecktumnak az ID-jét ahol éppen tartok ez a kérdés , mert a getElementById csak akkor jó ha az id alapján keresem az objectumot, de az objectum megvan mert abban vagyok csak annak az Id-jét hogy kérem le??

A hozzászóláshoz regisztráció és belépés szükséges
új téma

talán így?

Anonymous · 2006. Ápr. 19. (Sze), 07.39

id-t vagy más tulajdonságot a getAttribute() függvénnyel kaphatsz meg:

table_id=this.parentNode.getAttribute('id');

legalábbis én így képzelem a szegényes DOM ismereteimmel. :]

gex

A hozzászóláshoz regisztráció és belépés szükséges
új téma

while a te barátod!

Adam · 2006. Ápr. 19. (Sze), 09.49

Valami hasonló:

HTML:

<input type="button" onclick="torolj(this);"/>

<input type="button" onclick="torolj(this);"/>

És a JS kód:

function torolj(_button) {
if(!_button) { return false; }
var _parent = _button.parentNode;
while(_parent.parentNode && _parent.getAttribute('id') != 'keresettID') {
_parent = _parent.parentNode;
}
if(!_parent) { return false; } //Nincs meg a keresett elem, visszatérünk
... //csinálsz, amit akarsz, megvan a sorod
return true;
}


function torolj(_button) {
   if(!_button) { return false; }
   var _parent = _button.parentNode;
   while(_parent.parentNode && _parent.getAttribute('id') != 'keresettID') {
      _parent = _parent.parentNode;
   }

   if(!_parent) { return false; } //Nincs meg a keresett elem, visszatérünk

   ... //csinálsz, amit akarsz, megvan a sorod

   return true;
}

A hozzászóláshoz regisztráció és belépés szükséges
új téma

ötletbörze :)

toxin · 2006. Ápr. 19. (Sze), 14.33

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<script src="scripts/prototype.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
doSomething = function(el){
alert(el.id);
}
searchTable = function(el,doWhat,parentNumber){
(el.getElementsByTagName('TABLE').length==parentNumber-1 && el.tagName=='TABLE')? doWhat(el) : searchTable(el.parentNode,doWhat,parentNumber);
}
window.onload = function(){
var inputTags = document.getElementsByClassName('button_searchTable');
inputTags.each(
function(inputTag,index){
inputTag.onclick = function(){searchTable(this,doSomething,2);}
}
)
}
</script>
</head>
<body>
<table id="keresettID2" border="1">
<tr>
<td>
<table id="keresettID" border="1">
<tr><td>1</td><td><input class="button_searchTable" type="button" value="kiírom id-t"/></td></tr>
<tr><td>2</td><td><input class="button_searchTable" type="button" value="kiírom id-t"/></td></tr>
<tr><td>3</td><td><input class="button_searchTable" type="button" value="kiírom id-t"/></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<script  src="scripts/prototype.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">

doSomething = function(el){
	alert(el.id);
}

searchTable = function(el,doWhat,parentNumber){
	(el.getElementsByTagName('TABLE').length==parentNumber-1 && el.tagName=='TABLE')? doWhat(el) : searchTable(el.parentNode,doWhat,parentNumber);
}
	
window.onload = function(){
	var inputTags = document.getElementsByClassName('button_searchTable');
	inputTags.each(
		function(inputTag,index){
			inputTag.onclick = function(){searchTable(this,doSomething,2);}
		}
	)
}
</script>

</head>
<body>
<table id="keresettID2"  border="1">
	<tr>
		<td>
			<table id="keresettID" border="1">
				<tr><td>1</td><td><input class="button_searchTable" type="button" value="kiírom id-t"/></td></tr>
				<tr><td>2</td><td><input class="button_searchTable" type="button" value="kiírom id-t"/></td></tr>
				<tr><td>3</td><td><input class="button_searchTable" type="button" value="kiírom id-t"/></td></tr>
			</table>
		</td>
	</tr>
</table>
</body>
</html>

bocsesz a prototype-ért, de csak az eseménykezelőket teszi fel az input tag-ekre, mellesleg a mozilla devCenteren-en van egy egész bekezdés a témában
http://developer.mozilla.org/en/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés