✔ jQuery - DIV ein/ausblenden in Tabelle

[holly123]

hallo zusammen,

ich finde leider keine lösung zu meinem vorhaben mit jQuery. Ich muss auch sagen, dass ich mich erst seit ein paar Stunden mit jQuery beschäftige... wahrscheinlich ist es für einen kenner ein leichtes...

So, ich möchte in einer Html-Tabelle, die ich dynamisch mit php erzeuge einzelne divs ein und ausblenden... in den divs sollen details zu den einzelnen zeilen dargestellt werden.

hier meine ansätze:

html-code:

<table id="table_results" width="100%" border="0">
  <tbody><tr>
    <td><h3>Name</h3></td>
    <td><h3>Surname</h3></td>

    <td><h3>Title</h3></td>
    <td><h3>Company</h3></td>
    <td><h3>Email</h3></td>
    <td>&nbsp;</td>
  </tr>

  <tr>
    <td>name1</td>
    <td>hühü</td>
    <td>hh</td>
    <td>hh</td>
    <td>test@abc.com</td>
    <td>
     <img class="edit" src="images/page-edit-16x16.png" id="4712" width="16" border="0" height="16">
     <img class="delete" src="images/delete-16x16.png" id="4712" width="16" border="0" height="16">    
    </td>
  </tr>
  <tr>
    <td colspan="6">
    	<div class="user_details" id="4712" style="display: none;">User-Details</div>
    </td>
  </tr>
  
  <tr>
    <td>name2</td>
    <td>hühü</td>
    <td>hh</td>
    <td>hh</td>
    <td>test@abc.com</td>
    <td>
     <img class="edit" src="images/page-edit-16x16.png" id="4213" width="16" border="0" height="16">
     <img class="delete" src="images/delete-16x16.png" id="4213" width="16" border="0" height="16">    
    </td>
  </tr>
  <tr>
    <td colspan="6">
    	<div class="user_details" id="4213" style="display: none;">User-Details</div>
    </td>
  </tr>
  
  
</tbody></table>

hier mein Javascript-datei:

	$('#table_results td img.edit').live("click",function(){
		
		$('#table_results td div.user_details.' + this.id).show('slow');
		
		console.log("edit " + this.id);
	});

leider funktioniert das nicht - ich habe scho diverse andere tests gemacht, habe aber noch nicht die richitge lösung gefunden....

hoffe es kann mir jemand helfen!

vielen dank!
holly

 

[Sven Mintel]

Moin holly,

jQuery ermöglicht den Zugriff auf vielen Wegen, nicht nur über die CSS-ähnlichen Selektoren.

Hier eine Möglichkeit, die dies ausnutzt:

$('#table_results td img.edit')
  .live("click",
        function()
        {		
		          $(this)
		        .parent()
		       .parent()
		       .next()
		        .find('div:first-child')
		          .show('slow');
	      }
	     );

Der Ablauf:

$(this).parent().parent().next()

..man bewegt sich in der Knotenstruktur.
$(this) ist das geklickte Bild.
parent() jeweils das Elternelement.
next() der nächstfolgende Nachbar
find('div:first-child') das 1. div

Also folgende Bewegung:

1. Bild
2. <td>
3. <tr>
4. nächste <tr>
5. 1. div in dieser <tr>

...gotcha

Und alles ohne umständliche Vergabe von IDs.

 

[holly123]

hi sven,

vielen dank für deine super erklärung und deine schnelle hilfe

lg
holly