Dynamiczne tworzenie tabeli, komunikacja z PHP

[Paweł]

Witam

Chciałbym stworzyć następujący system. Użytkownik widzi na ekranie dwie
tabele, w pierwszej jest lista wszystkich dostępnych produktów, w drugiej
lista produktów zakupionych razem z ich ilością.

Czyli pierwsza tabela wyglądała np. tak:


Monitor 14" monochromatyczny | 1499 zł
Procesor 386 DX 33MHz | 599 zł
Dysk twardy 200 MB | 879 zł
Stacja dyskietek 5,25" | 199 zł


A druga tak:

Monitor 14" monochromatyczny | 1
Stacja dyskietek 5,25" | 4

Chodzi o to, żeby użytkownik na podstawie pierwszej tabeli sam stworzył
drugą... jak się do tego zabrać? Ta pierwsza jest generowana przez skrypt
PHP.

A potem jak przesłać tą listę użytkownika do skryptu PHP, tak aby zapisał tą
tabelę w bazie danych?


Pozdrawiam

[Paweł]

Aha, chciałbym mieć jeszcze jedno pole w drugiej tabeli z przyciskiem "Usuń"
służące do usuwania danego wiersza z tej tabeli.


Pozdrawiam

[Micha³ Cieciñski]

Post by Paweł
Aha, chciałbym mieć jeszcze jedno pole w drugiej tabeli z przyciskiem "Usuń"
służące do usuwania danego wiersza z tej tabeli.
Pozdrawiam

Witam. Oto propozycja rozwiązania (za cross-browerowość dostałbym pałę bo działa
tylko w IE), nie wiem czy o to chodziło bo nieprecyzyjnie zadałeś pytanie...
Pozostaje kwestia wysłania i zapisania do bazy... dałem palec ale na rękę nie
licz. Niech to będzie praca domowa :)

<script type="text/javascript">
function kup(nazwa, identyfikatorTowaru)
{
identyfikatorZakupu=identyfikatorTowaru.replace("towar","zakup");

if(!document.getElementById(identyfikatorZakupu))
{
document.getElementById("zakupy").style.visibility='visible';
nowyWiersz=document.getElementById("zakupy").insertRow();
nowyWiersz.id=identyfikatorZakupu;
nowaKomorka=nowyWiersz.insertCell();
nowaKomorka.innerText=nazwa;
nowaKomorka=nowyWiersz.insertCell();
nowaKomorka.innerText=1;
nowaKomorka=nowyWiersz.insertCell();
nowaKomorka.innerHTML="<input type=button value=Usun
onClick=usun(this.parentNode.parentNode.rowIndex) />";
}
else
{
wiersz=document.getElementById(identyfikatorZakupu);
liczbaSztuk=wiersz.cells[1].innerText;
liczbaSztuk++;
wiersz.cells[1].innerText=liczbaSztuk;
}
}

function usun(co)
{
tabela=document.getElementById("zakupy");
tabela.deleteRow(co);
if(tabela.rows.length<2)
{
tabela.style.visibility='hidden';
}
}
</script>

<style type="text/css">
.towar
{
cursor: pointer;
border: solid gray 1px;
}

td
{
border: solid gray 1px;
}
</style>


<table style="border: solid black 1px;">
<tr style="font-weight:bold; background-color: #eeeeee;">
<td>TOWAR</td>
<td>CENA</td>
</tr>
<td id="towar1" class="towar" onClick="kup(this.innerText, this.id);">
Monitor 14" monochromatyczny
</td>
<td>
1499 zł
</td>
</tr>
<tr>
<td id="towar2" class="towar" onClick="kup(this.innerText, this.id);">
Procesor 386 DX 33MHz
</td>
<td>
599 zł
</td>
</tr>
<tr>
<td id="towar3" class="towar" onClick="kup(this.innerText, this.id);">
Dysk twardy 200 MB
</td>
<td>
879 zł
</td>
</tr>
<tr>
<td id="towar4" class="towar" onClick="kup(this.innerText, this.id);">
Stacja dyskietek 5,25"
</td>
<td>199 zł</td>
</tr>
</table>

<br />

<table id="zakupy" style="border: solid black 1px; visibility: hidden;">
<tr style="font-weight:bold; background-color: #eeeeee;">
<td>TOWAR</td>
<td>ILE SZTUK</td>
<td>USUWANIE</td>
</tr>
</table>

[Paweł]

Post by Micha³ Cieciñski
Witam. Oto propozycja rozwiązania (za cross-browerowość dostałbym pałę bo działa
tylko w IE), nie wiem czy o to chodziło bo nieprecyzyjnie zadałeś pytanie...
Pozostaje kwestia wysłania i zapisania do bazy... dałem palec ale na rękę nie
licz. Niech to będzie praca domowa :)

Dziękuje bardzo. Prawie o to mi chodziło... w każdym razie ten przykład
bardzo wiele mi pomoże. Mam jeszcze jedno pytanko... jeśli można zadać :).
Czy da się to jakoś przerobić żeby działo pod NN i Mozilla? Czy w ogóle nie
ma na to najmniejszych szans?


Pozdrawiam

[m***@op.pl]

Post by Paweł
Dziękuje bardzo. Prawie o to mi chodziło... w każdym razie ten przykład
bardzo wiele mi pomoże. Mam jeszcze jedno pytanko... jeśli można zadać :).
Czy da się to jakoś przerobić żeby działo pod NN i Mozilla? Czy w ogóle nie
ma na to najmniejszych szans?
Pozdrawiam
Dziękuje bardzo. Prawie o to mi chodziło... w każdym razie ten przykład
bardzo wiele mi pomoże. Mam jeszcze jedno pytanko... jeśli można zadać :).
Czy da się to jakoś przerobić żeby działo pod NN i Mozilla? Czy w ogóle nie
ma na to najmniejszych szans?
Pozdrawiam

Przerobić się da...

Chyba jakos tak to bylo:
wiersz=document.createElement('tr');
komorka=document.createElement('td');
komorka.innerHTML="Zaewartosc komórki";
wiersz.appenChild(komorka);
tabela.appenChild(wiersz);

Milego guglowania

Pozdrawiam
Michał

[Michał]

Post by m***@op.pl
Przerobić się da...
wiersz=document.createElement('tr');
komorka=document.createElement('td');
komorka.innerHTML="Zaewartosc komórki";
wiersz.appenChild(komorka);
tabela.appenChild(wiersz);

Hmm... a IE nie przyjmie takiego kodu?


Pozdrawiam

[Micha³]

Post by Michał

Post by m***@op.pl
Przerobić się da...
wiersz=document.createElement('tr');
komorka=document.createElement('td');
komorka.innerHTML="Zaewartosc komórki";
wiersz.appenChild(komorka);
tabela.appenChild(wiersz);

Hmm... a IE nie przyjmie takiego kodu?

Hmm... a sprawdz czy przyjmie ;)

MC.

[Woodz]

oto co 2005-04-27 20:27 rzecze Paweł

Post by Paweł
Monitor 14" monochromatyczny | 1499 zł
Procesor 386 DX 33MHz | 599 zł
Dysk twardy 200 MB | 879 zł
Stacja dyskietek 5,25" | 199 zł
Monitor 14" monochromatyczny | 1
Stacja dyskietek 5,25" | 4
Chodzi o to, żeby użytkownik na podstawie pierwszej tabeli sam stworzył
drugą...

nic nie rozumiem... chcesz, żeby ktoś sobie np skopiował twoją tabvelę
do notatnika... trochę przerobił... a potem wkleił gdieś stworzoną swoją
tabelę i wysłał formularzem?... to daj pole <text/> do wklejenia tej
przerobionej tabeli

[Paweł]

nic nie rozumiem... chcesz, żeby ktoś sobie np skopiował twoją tabvelę do
notatnika... trochę przerobił... a potem wkleił gdieś stworzoną swoją
tabelę i wysłał formularzem?... to daj pole <text/> do wklejenia tej
przerobionej tabeli

Nie, nie nie chodzi o ręczną edycję. Chodzi o coś takiego. Użytkownik
otwiera stronę, wyskakuje mu jedna tabelka:

Monitor 14" monochromatyczny | 1499 zł | Dodaj
Procesor 386 DX 33MHz | 599 zł | Dodaj
Dysk twardy 200 MB | 879 zł | Dodaj
Stacja dyskietek 5,25" | 199 zł | Dodaj


I jeśli kliknie na przycisk "Dodaj" obok np. pierwszego elementu to wskakuje
ten element do tabeli poniżej:

Monitor 14" monochromatyczny | 1499 zł | 1

To ostatnie pole to liczba sztuk.

Potem chciałbym tą utworzoną przez użytkownika tabelę zapisać w bazie
danych... z poziomu JS tego nie zrobię, dlatego pomyślałem o PHP. Domyślam
się, że trzeba będzie stworzyć np. linka, w który kliknie użytkownik i
wykona się jakiś skrypt PHP zapisujący to do bazy...

Rozumiesz teraz o co mi chodzi?


Pozdrawiam

[Woodz]

oto co 2005-04-28 12:02 rzecze Paweł

Post by Paweł
Chodzi o coś takiego. Użytkownik
Monitor 14" monochromatyczny | 1499 zł | Dodaj
Procesor 386 DX 33MHz | 599 zł | Dodaj
Dysk twardy 200 MB | 879 zł | Dodaj
Stacja dyskietek 5,25" | 199 zł | Dodaj
I jeśli kliknie na przycisk "Dodaj" obok np. pierwszego elementu to
Monitor 14" monochromatyczny | 1499 zł | 1
To ostatnie pole to liczba sztuk.

Tak, teraz tak... ale widze tu conajmniej dwie sprawy:

1. sprawdzenie czy dodawany towar już był
a) jeśli tak - zmienić liczbę
b) jeśli nie dodać i ustawić liczbę na 1

2. dodanie nowego wiersza, na jeden ze sposobów
a) przepisanie takiej samej informacji jak w tabeli źródłowej
b) odkrycie dotychczas ukrytego wiersza

Jeśli to ma być obsługiwane w JS po stronie przeglądarki to najbardziej
przemawia do mnie rozwiązanie takie, że tabelki źródłowa i docelowa
odrazu są wygenerowane w całości... górna ma przyciski "dodaj" dolna
pole <input> zawierającą zamawianą ilość... js ukrywający wszystkie
wiersze w dolnej tabeli w których ilość jest mniejsza od 1 lub nie jest
liczbą... kliknięcie dodaj powoduje zwiększenie liczby w odpowiednim
polu... wywoływany jest js odświerzający widok... przycisk "wyślij"
wysyła formularz ze wszystkimi polami <input> zawierającymi zamawiane ilości

Post by Paweł
Potem chciałbym tą utworzoną przez użytkownika tabelę zapisać w bazie
danych... z poziomu JS tego nie zrobię, dlatego pomyślałem o PHP.
Domyślam się, że trzeba będzie stworzyć np. linka, w który kliknie
użytkownik i wykona się jakiś skrypt PHP zapisujący to do bazy...

jeśli pola <input> będą miały name identyfikujący towar to nie trzeba
będzie wysyłać treści strony w zapisanej w HTML

<scipt>
funkcja Dodaj(dla_name) {
pole(name=dla_name).value++
}
funkcja Ukrywaj() {
t = element(tabela2);
tr = lista wierszy w t;
dla(i = kolejne numery tr) {
i = tr[i].element(input);
jeśli(input.value jest liczbą && input.value > 0)
tr[i].style = widoczny
jeśli_nie
tr[i].style = ukryty
}
}
</script>

<tabela1>
<tr><td>Monitor 14"</td><td>1499 zł</td><td><Dodaj m1/></td></tr>
<tr><td>Procesor 386</td><td>599 zł</td><td><Dodaj p1/></td></tr>
<tr><td>Dysk twardy</td><td>879 zł</td><td><Dodaj d1/></td></tr>
<tr><td>FDD</td><td>199 zł</td><td><Dodaj d2/></td></tr>
</tabela1>

<formularz>
<tabela2>
<tr><td>Monitor 14"</td><td>1499 zł</td><td><input m1/></td></tr>
<tr><td>Procesor 386</td><td>599 zł</td><td><input p1/></td></tr>
<tr><td>Dysk twardy</td><td>879 zł</td><td><input d1/></td></tr>
<tr><td>FDD</td><td>199 zł</td><td><input d2/></td></tr>
</tabela2>
<wyślij/>
</formularz>


po wysłaniu takiego formularza dostaniesz np: ?m1=1&p1=1&d2=3 co znaczy
1 monitor + 1 procesor + 3 napędy dyskietek

[William]

Post by Paweł

nic nie rozumiem... chcesz, żeby ktoś sobie np skopiował twoją tabvelę do
notatnika... trochę przerobił... a potem wkleił gdieś stworzoną swoją
tabelę i wysłał formularzem?... to daj pole <text/> do wklejenia tej
przerobionej tabeli

Nie, nie nie chodzi o ręczną edycję. Chodzi o coś takiego. Użytkownik
Monitor 14" monochromatyczny | 1499 zł | Dodaj
Procesor 386 DX 33MHz | 599 zł | Dodaj
Dysk twardy 200 MB | 879 zł | Dodaj
Stacja dyskietek 5,25" | 199 zł | Dodaj
I jeśli kliknie na przycisk "Dodaj" obok np. pierwszego elementu to wskakuje
Monitor 14" monochromatyczny | 1499 zł | 1
To ostatnie pole to liczba sztuk.

Czy nie będzie prościej wstawić w tej tabeli kolumnę z polami "ilość
sztuk w zamówieniu" ?

[Woodz]

oto co 2005-04-28 14:00 rzecze William

Post by William
Czy nie będzie prościej wstawić w tej tabeli kolumnę z polami "ilość
sztuk w zamówieniu" ?

IMHO byłoby najprościej, ale widać autor ma jakiś tajemniczy cel w tym
aby zrobić inaczej... może wizualny?

[Micha³]

Post by Paweł

Post by Paweł

Post by Woodz
nic nie rozumiem... chcesz, żeby ktoś sobie np skopiował twoją tabvelę

do

Post by Paweł

Post by Woodz
notatnika... trochę przerobił... a potem wkleił gdieś stworzoną swoją
tabelę i wysłał formularzem?... to daj pole <text/> do wklejenia tej
przerobionej tabeli

Nie, nie nie chodzi o ręczną edycję. Chodzi o coś takiego. Użytkownik
Monitor 14" monochromatyczny | 1499 zł | Dodaj
Procesor 386 DX 33MHz | 599 zł | Dodaj
Dysk twardy 200 MB | 879 zł | Dodaj
Stacja dyskietek 5,25" | 199 zł | Dodaj
I jeśli kliknie na przycisk "Dodaj" obok np. pierwszego elementu to

wskakuje

Post by Paweł
Monitor 14" monochromatyczny | 1499 zł | 1
To ostatnie pole to liczba sztuk.

Czy nie będzie prościej wstawić w tej tabeli kolumnę z polami "ilość
sztuk w zamówieniu" ?

Słuszna uwaga. Warto też rozważyć interakcję z użytkownikiem polegającą na
zapytaniu ile sztuk chce zakupić, bo klikanie powiedzmy 50 razy w przycisk dodaj
może kogoś delikatnie mówiąc rozdrażnić.

Pozdrawiam
Michał