Praca na tabelach

Witam,

Mam taki kod, bardzo prosty, ale mam niewielki problem, w linku można podejrzeć cały kod i przetestować:
http://jsfiddle.net/tD85v/

Mam jakieś przykładowe dane w tabeli (docelowo są to dane z bazy danych), które chcę edytować, wiersz po wierszu. Takie modyfikowanie będzie odbywać się za pomocą id z bazy danych. Jak mam wpisać te id dla każdego wiersza i jak wczytywać do jquery ??

Jak mam coś takiego

<tr id="1">
<tr id="2">
<tr id="3">

 
 var data = $('#3').html();

i zamiast

 #3

Chciałbym, żeby tam na bieżąco wczytywało id z tabeli odpowiedniego wiersza <tr id="" po kliknięciu w odpowiednie Edytuj wyskakuje odpowiednie id z <tr id="" i tylko o to mi chodzi :(

Chcę coś takiego otrzymać, że jak
Klikam na Edytuj w pierwszym wierszu i mam var data = 1,
klikam w Edytuj w trzeciej linijce i mam var = 3 etc

NIe wiem jak napisać takie przypisanie zmiennych, prosta sprawa, ale nie mogę się połapać ....

1. Atrybut ID nie może zaczynać się od cyfry!
2. ID jest wartością unikalną! Nie możesz dać wielu elementom to samo ID.
3. Zamiast pisać nadmiarowe atrybuty - użyj lepszego selektora.
4. Jesteś pewien, że chcesz używać live (które delikatnie może spowalniać działanie strony)? To już zostawiam do Twoich rozważań, bo nie wiem, co dokładnie robisz, ale pewnie idziesz na łatwiznę, bo nie ma zabaw z ponownym podpinaniem zdarzeń.

<table border="1" id="tabelka_js"> <!-- doszło ID, jeżeli takich tabelek jest więcej - użyj CLASS zamiast ID, i zmień selektor w javascripcie -->
<colgroup>
<col /> 
<col />
</colgroup>
<tr id="element_1"> <!-- id nie może zaczynać się od cyfry -->
    <th>A1</th><th>B1</th><th><a href="#">Edytuj</a></th> <!-- wywalone powtarzane i nadmiarowe ID -->
</tr>
<tr id="element_2">
    <td>A2</td><td>B2</td><th><a href="#">Edytuj</a></th>
</tr>
<tr id="element_3">
    <td>A3</td><td>B3</td><th><a href="#">Edytuj</a></th>
</tr>
</table>

<div id="wynik"> </div>

$('#tabelka_js td:last-child a').live("click",function() { //selektor może być do poprawy jeżeli zagnieżdżasz tabele
  // "this" w tym miejscu wskazuje na element `a`
  var element_tr = $(this).closest('tr'); // wyszukuje najbliższy element pasujący do selektora "w górę" DOM.
  var data = $(element_tr).attr('id'); // wartość: element_*, więc:
  var data_cyfra = data.replace('element_', '');
  $('#wynik').html(data); // wyświetl sobie co Ci tam pasuje 
});

Ma być tak:

 
$(document).ready(function(){

   $('#button').click(function(){
		  var data = $('#id').html();
	 	 $('#wynik').html(data); 
	});

});	
	

.live() dałem całkowicie przez przypadek, testowałem wszystko co się da... żeby tylko działa skrypt...

dzek69 jesteś MISTRZ!! dzięki serdecznie ;) działa idealnie

Mam jeszcze jedno pytanie, jak lepiej zrobić edytowanie tych danych. Np przez klikam edytuj i wyświetlenie dialoga z zawartością z wiersza ?? czy może edycja inline ? czyli klikam edytuj i edytuje dane w tabeli, pola zamieniają się na inputy??

Jak uważasz za wygodniejsze i użyteczniejsze. Jeżeli pola są małe, nie zawierają dużej ilości znaków - skłoniłbym się na inline.

a jak pobrać dane z pojedynczych komórek w tabeli ??

ja mam coś takiego:

	  var imie1 = $(this).closest('td');
	  var imie = $(imie1).html(); 
	  alert(imie);
 

dodać do każdego:

       <td id="imie">
       <td id="nazwisko">
       <td id="wiek">
 

czy jakoś tak??

Poczytaj i spróbuj zrozumieć co robią:
closest, parent, children, find oraz ogarnij selektory CSS - wtedy nie będziesz miał problemu z poruszaniem się po DOM.
Twoje pytanie jest zbyt mało konkretne, żeby udzielić Ci konkretnej odpowiedzi, bo nie wiem z którego miejsca w kodzie chcesz się dostać do tych wartości.

poczytam, dzięki za podpowiedz :)

a chodzi mi dokładnie o tą tabelę wcześniejszą :) http://jsfiddle.net/tD85v/

Klikam w edytuj i chcę, żeby pobrało wszystkie wartości z odpowiedniego wiersza :)
np. klikam w pierwszy wiersz i pobiera mi wartość A1 oraz B1, klikam w trzeci wiersz i pobiera
mi A3 oraz wartosć B3 etc

dopomóżcie trochę :( bo nie idzie mi :(

dodałem sobie

 .css('background', 'red');

i teraz jak chodzę po drzewku DOM zmienia mi kolory tła komór w których obecnie jestem na czerwono :) zaraz może dojdę:D muszę się tego nauczyć :D

klikasz w edytuj i this wskazuje na element a. chcesz wybrac wszystkie kolumny po kolei wiec wracasz do najblizszego tr w górę (closest), potem dobierasz się do konkretnych td (np. find i selektor nth-child). Podobny problem miał ten koleś:
http://4programmers.net/Forum/Webmastering/206430-przechowywanie_wartosci_w_znacznikach_html

ooo dzięki :) poczytam. Napisałem coś swojego:

	$(this).closest('tr').css('background', 'red'); 
	var imie = $(this).closest('tr').find('#imie').html();
	var email = $(this).closest('tr').find('#email').html();
	var haslo = $(this).closest('tr').find('#haslo').html();
	
	alert(imie+email+haslo);

	<tr id="element_'.$x++.'">
	<td id="imie">'.$wynik['login'].'</td>
    <td id="email">'.$wynik['email'].'</td>
    <td id="haslo">'.$wynik['haslo'].'</td>
	<td><a class="delete" href="#" id="'.$wynik['ID_uzytkownik'].'"> <img src="delete.png" alt="Delete" style="border:none; height:18px; text-align: center;" /></a></td>
	<td><a href="#">Edytuj</a></td>
	</tr>

Domyślam się, że to nie jest optymalne wyjście :D co o tym sądzisz ?

NIE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

DUPLIKUJ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

ID !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Zasada - w tabeli generowanej z php ID możesz nadać tylko do elementu <table> i ew. <tr> do wpisania ID rekordu (ale nie sama cyfra!), jeżeli nie potrafisz zrozumieć, że wygenerowanie dwóch wierszy z bazy danych (dwóch tr) stworzy dwa elementy o np. id "email", co jest błędem i będzie dawać błędne wyniki zawsze.

Masz taki atrybut jak "class" - poczytaj.

Możesz nadać klasy, możesz używać nth-child. Każdy ma swoje zalety i wady w sumie dla świętego spokoju zostańmy przy klasach.

To jedno.

Dwa.

Co to jest "element_'.$x++.'"? Chcesz te elementy liczyć? A po cholerę. Tam miało być ID rekordu z bazy, więc raczej $wynik['ID_uzytkownik'], niż jakieś $x, które jeszcze zwiększasz, czyli robisz licznik.

W dodatku robiąc przy delete ID ZNOWU wpisałeś samą cyfrę w atrybut ID.

<tr id="element_'.$wynik['ID_uzytkownik'].'">
  <td class="imie">'.$wynik['login'].'</td>
  <td class="email">'.$wynik['email'].'</td>
  <td class="haslo">'.$wynik['haslo'].'</td>
  <td><a class="delete" href="#">Usuń</a></td>
  <td><a class="edit" href="#">Edytuj</a></td>
</tr>

Zamiast wstawiać obrazek do usuwania, po prostu zrób styl do a.delete, szczególnie, że temu obrazkowi wpisałeś styl w atrybut :/

$('#tabelka_js a.delete').click(function(){ // zrób sobie takie samo dla .edit
  var tr = $(this).closest('tr'); // wybieramy raz, zamiast wybierać potem 3 lub więcej razy i duplikować kod i zmulać cpu.
  var imie = $(tr).find('>.imie'); // to samo dla emaila i hasla
  // jako, że tr samo w sobie jest obiektem jQuery nie potrzebujemy tak naprawde pisać $(tr), ale już nie będę Ci mieszał..
  alert(imie);
});

kumam, już wszystko poprawiam od nowa :/ masz racje, nie pomyślałem o niektórych rzeczach

to jest sens zostawiać

class="imie"
class="email"
class="haslo"
etc

jak można wyszukać i bez tego czy się mylę ?

Można, używając nth-child, ale: nie ogarniasz innych rzeczy, żeby jeszcze Ci tym zawracać głowę, a nth-child ma taki minus, ze zmiana kolejności kolumn spowoduje, że kod js też trzeba będzie zmienić, a jak masz klasy - to nie, bo w wybieranie następuje wg nich. Więc zostaw z klasami.

ok, napisałem wszystko tak jak mi podpowiedziałeś i w sumie nawet fajnie to wygląda etc Jestem zadowolony :) sporo dzięki Tobie nauczyłem się, wiem jak już zwinnie poruszać się po drzewku DOM :)

Tylko mam jeden mały problem, przez zastosowanie zmian :( Ogólnie mam tabele w której chce dodawać, usuwać oraz edytować użytkowników :) Dodaje mi ładnie, ale mam problem z usunięciem i edytowaniem świeżo dodanego/-ych użytkowników ?? Jest to spory problem dla mnie :( Usuwam oraz edytuje po id user' z tabeli. Wiec w add_user.php zwraca mi

echo $last_added_id;

dodaje te ID do </div>">

 I w sumie jak kliknę na tego nowo dodanego usera na edycje lub delete to nie działa :( 

Domyślam się, że problem opisałem po łebkach, także mogę umieścić cały kod z komentarzami na stronie, jak tak będzie łatwiej ??

<?php

$name = $_POST['name'];
$email = $_POST['email'];
$password = $_POST['password'];

$polaczenie=mysql_connect("localhost","root",""); /* Nawiązanie połączenia z bazą */

mysql_select_db("suwalki",$polaczenie); /* Wybranie odpowiedniej bazy danych */

$sql=("INSERT INTO `uzytkownicy` 
	( `login`, `haslo`, `ranga`, `email`, `u_activation_key`, `u_active`) 
	VALUES ('$name', '$password', '1', '$email', '0', '0');");


$wynik=mysql_query($sql); 
$id = mysql_insert_id(); 

echo $id;

mysql_close($polaczenie);
?>

$.post("add_user.php", {'name': $('#name').val(), 'email': $('#email').val(), 'password': $('#password').val()}, function(data) { 
$('#result').html(data);
					
			$("#user")
				.dialog({														
							show: "blind",
							hide: "explode",
							buttons:{
								"Ok": function() { 							                            
								$(this).dialog('close'); 
							}}
						})						 
					});// '<tr class="element_'.$wynik['ID_uzytkownik'].'">';
	
			$( "#users tbody" ).append( "<tr class='element_<div id='result'></div>'>" +
                            "<td>" + name.val() + "</td>" + 
                            "<td>" + email.val() + "</td>" + 
                            "<td>" + password.val() + "</td>" +
			    "<td><a class='delete'> <img src='delete.png' /></a></td>"+
                            "</tr>" ); 
                        $( this ).dialog( "close" );                  				
		}

Nie wiem czy w ogóle tak można zrobić. Chodzi o to, żeby a

$( "#users tbody" ).append( "<tr class='element_<div id='result'></div>'>" 

dodać id ostatnio dodanego usera :/ czy coś takiego jest w ogóle możliwe ? bo ogólnie ten mechanizm wyświetla poprawnie id w HTMLu, ale nie wiem jak to połączyć z js ?? W tym przypadku jest problem z działaniem asynchronicznym... jak na razie nie wiem jak ten problem mogę pominąć :/ ostatni rzecz w projekcie :/

z tym

 $('a.delete').live('click',function() { ...

wcześniej mi działało, więc chyba będę kombinował jednak z tą funkcją live()

$( "#users tbody" ).append( "<tr class='element_<div id='result'></div>'>"

WTF?

1. Dlaczego zrezygnowałeś z ID? W tym miejscu jest to jak najbardziej poprawne (bo id nie będą takie same, w końcu wyświetlasz różne wiersze z bazy o różnych ID).

W tym momencie Twój element "class" będzie zawierał bliżej nieokreślone coś. Wstawiłeś jakiegoś diva jako zawartość atrybutu class.
Zainstaluj sobie Firebuga (dla FF), albo użyj Narzędzi deweloperskich wbudowanych w IE, albo Opera Dragonfly dla Opery, albo tez jakieś Narzędzia deweloperskie bodajże w Chromie są, naucz się z tego korzystać. W ten sposób jak sobie coś wstawisz w javascripcie to sobie łatwo podglądniesz co się wydarzyło w DOM, przykład:
http://i.imgur.com/L0coN.jpg

3. Wcięcia! Poprawne, a nie losowe naciskanie tab, tutaj nie wiadomo co jest do czego, patrz (wybacz screenshota, ale nie chciało mi się tego bałaganu sprzątać, więc masz screenshota z mojego IDE, który to uporządkował):
   

Czytelniej. Od razu widać, że to całe append dzieje się POZA $.post, czyli prawdopodobnie wstawi się tam trochę kodu html z pustymi wartościami.
W dodatku jest tu jeszcze jakiś close z dialogu oraz nadmiarowa klamra zamykająca.
Może to tylko źle wycięty fragment, nie wiem.

Wracając.
Jeżeli chcesz wstawić sobie zawartość z elementu HTML, to wybierz ją sobie do zmiennej, a potem tę zmienną dodaj do stringa, nie możesz w atrybucie wpisać całego diva i liczyć, że z tego zrobi się coś innego.
Jeżeli to append miało być w funkcji $.post, to po prostu użyj zmiennej data.

Podsumowanie lekcji z tego posta:

1. Dokładność. Komputer wykonuje ściśle określone zadania. Nigdy nie zgaduje intencji autora, bo nawet jakby potrafił, to w większości przypadków przysporzyłoby to więcej kłopotów niż pożytku. Pisz kod dokładnie, czytelnie, żebyś sam go rozumiał i żeby zrozumieli go inni.
2. Firebug/inne narzędzia deweloperskie. Mają setki funkcji przydatnych do codziennego klepania stronek.

przerobiłem, jak napisałeś

tylko problem z widocznością zmiennych :(

w If'ie mam tego

 $.post() 

i jak wyrzucić tą zmienną data po za if'a do $().append()??

wpisałem na początku kodu last_id=''; i poxniej w pętli last_id = data; ale tak nie idzie :/

jak wrzuce zawatość .append() razem z $.postem() to doda mi wiersz do tabeli z pustymi wartościami, tak jak pisałeś :/

Nic mi ten post nie mówi. Wrzuć cały kod JS jaki masz.

Jak z funkcji $.ajax() czy $.post() wywalić datę po za tę funkcję ? żeby była widoczna po za tą funkcją ?? jak dałem zmienną globalną i zapisałem do niej data to i tak nie widzi jej :(

Ty weź nie używaj zmiennych globalnych. W ogóle. Oglądałem ten Twój kod i zwątpiłem, stąd mój brak dalszego odzewu, bo potrzebuję dnia wyciszenia i dużej dawki spokoju, żeby dalej ciągnąć ten wątek (a na to się nie zanosi przez najbliższe parę dni). Zrób sobie ze swoimi danymi co potrzebujesz W callbacku. Tyle. Potem ew. wywołaj sobie (w callbacku!) funkcję przekazując te dane. Na 10000000000000% nie potrzebujesz tego zapisywać w żadnej globalce.

Działa, dałem wszystko do funkcji, zmienne name, email, password przekazałem jako zmienne funkcji ;)

if(bValid){
dodaj_wiersz(name.val(),email.val(),password.val());
}

A w środku funkcji jest $.post() w której widać date i przekazane argumenty ;) Dostałem bardzo dobrą lekcje :) pomyślałem sam co i jak, napisanie tego zajęło mi chwilę :/ szkoda męczyć ludzi na forum:/