[jQuery] automatyczna tabela z mysql + ukrywanie i chowanie danych Opcje

[marczak]

Witam.

Mam pewnien problem ze stworzeniem dynamicznej tabeli pobranej z bazy mysql.

Chcę mieć taką strukutórę znaczników:

[HTML] pobierz, plaintext 
 
 
<table  id="work">
 
         <tr>
            <th>ID</th>
            <th>Tytył pracy</th>
            <th>Promotor</th>
            <th>Krótki opis</th>
            <th></th>
         </tr>   
 
 
 
 
 
 
 
        <tr>
		<td>:praca:</td>
		<td>:tytul:</td>
		<td>:promotor:</td>
                <td>:opis:</td>
                <td><div class="arrow"></div></td>
 
	</tr>
        <tr>
            <td colspan="5">
 
                <a href="#">Rezerwacja</a>
                <h4>Pełny opis</h4>
 
                <ul>
                    <li>Tytył pracy : Testowy Tytuł</li>
                    <li>Promotor pracy: Testowy promotor</li>
                    <li>Pełny opis: </br>asd</li>
                </ul>
 
            </td>
        </tr>
 
 
</table> 
[HTML] pobierz, plaintext 

Następnię używam jquery aby chować to co znajduję się wewnątrz

[HTML] pobierz, plaintext 
 <td colspan="5">
[HTML] pobierz, plaintext 

Używając najtępującego kodu:

[HTML] pobierz, plaintext 
 
 $(document).ready(function(){
 
 
            $("#work tr:odd").addClass("odd");
            $("#work tr:not(.odd)").hide();
            $("#work tr:first-child").show();
 
            $("#work tr.odd").click(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
            });
 
 
[HTML] pobierz, plaintext 

I gdy mam statyczną tabelę taką jak wyżej to wszystko ładnie działa. Problem pojawia się gdy chcę sobię tą tabelkę zapełnić zawartością z mysql.

Robię to tak:

[PHP] pobierz, plaintext 
<?php
 
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
require_once 'function.php';
 
 
 
     $con = connection();
     $sql = "
		SELECT *
		FROM praca
		ORDER BY id_praca";
 
	$result = mysql_query($sql);
       $result = formatResult($result);
       mysql_close($con);
      $JSData=json_encode($result);
       echo $JSData;
 
 
?>
[PHP] pobierz, plaintext 

Funkcja zwracająca dane i konwertująca je do jsona. Dane będą pobierane przez jquery i wyświetlane na stronie.
Robię to tak:

[HTML] pobierz, plaintext 
 $.ajax({
        type: "POST",
        url: "LoadTable.php",
        dataType : 'json',
 
        success : function(json) {
 
             for(var i=0; i<json.length; i++){
 
             var id = json[i]['id_praca'];
             var promotor = json[i]['id_promotor'];
             var tytul = json[i]['tytul'];
             var opisS = json[i]['opis_short'];
             var opisL = json[i]['opis_long'];
             var rezerwacja = json[i]['rezerwacja'];
 
           var row = '<tr><td>'+id+'</td><td>'+tytul+'</td><td>'+promotor+'</td><td>'+opisS+'</td><td><div class="arrow"></div></td></tr>';
           row = row + '<tr><td colspan="5"><a href="#">Rezerwacja</a><h4>Pełny opis</h4><ul><li>Tytył pracy : Testowy Tytuł</li><li>Promotor pracy: Testowy promotor</li><li>Pełny opis: asda</li></ul></td></tr>';
 
 
 
            $('#work').append(row);
        }
        }
    });
[HTML] pobierz, plaintext 

Tabela jest tworzona, jednak nie wygląda tak samo jak ta statyczna, chociaż wydaję mi się ze struktura jest identyczna. Po za tym jquery wogóle nie reaguje na zwijanie i rozwijanie dodatkowego wiersza.

Proszę o pomoc.

Ten post edytował marczak 12.12.2011, 22:30:33

[john_doe]

nie reaguje bo w funkcji js powinieneś użyć .live('click', function).....

[marczak]

hm... zmodyfikowałem program do postaci:

[HTML] pobierz, plaintext 
 
<script type="text/javascript">  
        $(document).ready(function(aa){
 
 
            $("#work tr:odd").addClass("odd");
            $("#work tr:not(.odd)").hide();
            $("#work tr:first-child").show();
            $("#work tr.odd").live("click", function(){ $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up"); });   
 
             $.ajax({
        type: "POST",
        url: "LoadTable.php",
        dataType : 'json',
 
        success : function(json) {
 
 
 
           var table = $('<table id="work" /></table>');
           var th = $('<tr><th>ID</th><th>Tytuł pracy</th></th><th>Promotor</th><th>Krótki opis</th><th></th></tr>');
 
           table.append(th); 
 
             for(var i=0; i<json.length; i++){
 
 
             var id = json[i]['id_praca'];
             var promotor = json[i]['id_promotor'];
             var tytul = json[i]['tytul'];
             var opisS = json[i]['opis_short'];
             var opisL = json[i]['opis_long'];
             var rezerwacja = json[i]['rezerwacja'];
 
            var td = $('<tr><td>' + id + '</td><td>' + tytul + '</td><td>' + promotor + '</td><td>' + opisS + '</td><td><div class="arrow"></div></td></tr><tr><td colspan="5">TEST</td></tr>');
 
    table.append(td);         
 
 
 
 
        }
   $('#tabelka').append(table);    
 
 
        }
    });
 
 
        });
    </script>
       [html]
[HTML] pobierz, plaintext 

[/html]

Jednak część górna skryptu nie reaguje:

[HTML] pobierz, plaintext 
 
  $("#work tr:odd").addClass("odd");
 
            $("#work tr:not(.odd)").hide();
 
            $("#work tr:first-child").show();
 
            $("#work tr.odd").live("click", function(){ $(this).next("tr").toggle();
 
                $(this).find(".arrow").toggleClass("up"); });   
[HTML] pobierz, plaintext 

Jakiś pomysł?

Ten post edytował marczak 13.12.2011, 20:19:15