Keskustelu: Nettisivujen teko: Taulukon solun muuttaminen syöttökentäksi

Onko mahdollista muuttaa javascriptillä tai jollain muulla tietokannasta haettu
taulukko syöttökentäksi nappulaa painamalla?

Eli tulokset haetaan taulukkoon php:lla. Jokaisen rivin perässä
olisi "Muokkaa" -nappula, jota painamalla taulukko/rivi muuttuisi
syöttökentiksi, joissa olisi haetut arvot. Erillisellä päivitä -nappulalla
tiedot päivittyisivät tietokantaa.

Muokkaa -nappula voisi olla myös erillään itse taulukosta

- AnttiK

wisekki kirjoitti:

Onko mahdollista muuttaa javascriptillä tai jollain muulla tietokannasta haettu
taulukko syöttökentäksi nappulaa painamalla?

on

Voit joko hakea tiedot etukäteen (php:lla tulostamalla) javascript-taulukkomuuttujaan, josta sitten poimit tiedot napin painalluksen yhteydessä ja korvaat HTML-tägien sisällön niiden mukaan.

Voit "säästää" myös kaistaa poimimalla kenttien sisällöstäkin arvot ja ruuttaamalla nämä sitten kenttiin, tai korvata tägit "kehittyneemmällä" AJAX-tekniikalla.

Vai haettiinko tässä valmista koodia?

Tässä ainakin pieni esimerkki kuinka voit muuttaa taulukon sisällön muokattavaksi
tekstikentäksi:

<script type="text/javascript">

var muokkaus = false;

function muokkaa (e) {
	if(!muokkaus) {
		e.innerHTML = "<textarea rows='10' cols='30'>" + e.innerHTML + "</textarea>";
		muokkaus = true;
	}
}

</script>

<table>

<td onclick="muokkaa(this)">Klikkaa tekstiä muokataksesi sitä.</td>

</table>

Joo, sinänsä tosiaan DOMia hyödyntämällä voi poimia vaikka taulukon sarakkeiden arvot ja lätkäistä tilalle textboksit.

Kannattaa tutustua Javascriptin nykymahdollisuuksiin ja valmiisiin Javascript-kirjastoihin. Lähinnä mielikuvitus on rajana tässäkin, kuten useimmiten ohjelmoinnissa.

Hmm... tästähän voisi kehitellä vaikka mitä ;)

Ja sitten se tallentaisi esimerkiksi oman nimimerkin kun muokkaus on tehty :)

Kiitoksia hyvistä vastauksista, ja eikun räpeltämään..

Lebe80 kirjoitti:

Vai haettiinko tässä valmista koodia?

Valmiista koodista on aina helpompi soveltaa
omaan käyttötarkoitukseen, varsinkin aloittelijalta :)

wisekki: itse taas näkisin, että useasti tullaan kyselemään teoriatasolla, miten jokin ohjelmointihomma kannattaa tehdä, ja koodata sitten sen pohjalta omien taitojen mukaan.

Lebe80: Totta tuokin, mutta aloittelijalle mielestäni on helpompi
soveltaa jo valmiista koodista omaan tarkoitukseen oleva koodi.

Kun taidot ovat kehittyneet tasolle, jossa jokaista riviä ei tarvitse
varmistaa valmiista koodista niin voidaan siirtyä teoriatasokoodaukseen :)

Esimerkiksi ylemmässä vastauksessasi ainakin itseltä meni täysin ohi:
"..tai korvata tägit "kehittyneemmällä" AJAX-tekniikalla."
Jotta voisin soveltaa yllä olevaan omia taitojani niin ensiksi joutuisin
googlen avustuksella selvittämään mikä on AJAX -tekniikka :)

Mutta juu, olen uusi tällä, joten en tiedä onko tämä foorumi vain
kehittyneimmille koodareille, jotka pärjäävät pelkillä teoriatason helpeillä.

- AnttiK

wisekki kirjoitti:

Mutta juu, olen uusi tällä, joten en tiedä onko tämä foorumi vain kehittyneimmille koodareille, jotka pärjäävät pelkillä teoriatason helpeillä.

Eiköhän tämä foorumi ole tarkoitettu ihan kaiken tasoisille koodereille. Kuitenkin jos joskus haluaa kehittyäkin siinä, niin kannattaa yrittää välttää copy-paste-"koodaamista".

Ja nettihän on pullollaan tutoriaaleita erilaisten tekniikoiden käytöstä, joten sikäli aloittelijallekin voi olla hyötyä suuntaviittojen tarjoamisesta soveltuviin tekniikoihin.

Ja ihan sivuhuomautuksena, suomenkielistä tekstiä (erotuksena siis ohjelmointikieliseen) kirjoitettaessa ei kannata itse lisäillä rivinvaihtoja muualle kuin kappaleväleihin. Selain tai muu tekstiä näyttävä ohjelma osaa kyllä hoitaa rivityksen kulloinkin tarkoituksenmukaiseen rivileveyteen.

Valmista koodia saa kysyä ja antaa vastaukseksi. Usein toimiva koodi kertoo enemmän kuin hyväkin selitys.

Grez kirjoitti:

Ja ihan sivuhuomautuksena, suomenkielistä tekstiä (erotuksena siis ohjelmointikieliseen) kirjoitettaessa ei kannata itse lisäillä rivinvaihtoja muualle kuin kappaleväleihin. Selain tai muu tekstiä näyttävä ohjelma osaa kyllä hoitaa rivityksen kulloinkin tarkoituksenmukaiseen rivileveyteen.

Asia selvä, on vaan e90:n näyttö sen verta pieni, että kirjoitusvirheet on helpompi lukea kun itse rivittelee :)

Sovelsin omia, aloittelijan taitoja, ja yllä olevaa javascript pätkää ja tein seuraavan polttoaineen kulutusta seuraavan rävellyksen:

<script type="text/javascript">

var muokkaus = false;

function muokkaa (e,nimi,muuttuja) {
    if(!muokkaus) {
        e.innerHTML = "<input type='text' cols='10' nimi='" + nimi + "' value='" + muuttuja + "'";
        muokkaus = true;
    }
}
</script>
<?php
$self   = $_SERVER['PHP_SELF'];

$taulukko = mysql_query("SELECT ID, PVM, TANKATTU, AJETTU, HINTA, KUSTANNUS FROM bensa ORDER BY ID DESC");

if(isset($_POST['Update']))
{
    $id = $_POST['id'];
    $pvm = $_POST['pvm'];
    $tankattu = $_POST['tankattu'];
    $ajettu = $_POST['ajettu'];
    $hinta = $_POST['hinta'];
    $kustannus = $_POST['kustannus'];

    $update = "UPDATE bensa SET ID = '$id', PVM = '$pvm', TANKATTU = '$tankattu', AJETTU = '$ajettu', HINTA = '$hinta', KUSTANNUS = '$kustannus' WHERE ID = '$id' LIMIT 1";

    mysql_query($update) or die('MySQL Virhe:' . mysql_error());
    echo "Päivitetty";
} ?>
<table>

<?php

 for ($i = 0; $i < mysql_num_rows($taulukko); $i++) {

    $id = mysql_result($taulukko, $i, 0);
    $pvm = mysql_result($taulukko, $i, 1);
    $tankattu = mysql_result($taulukko, $i, 2);
    $ajettu = mysql_result($taulukko, $i, 3);
    $hinta = mysql_result($taulukko, $i, 4);
    $kustannus = mysql_result($taulukko, $i, 5);

	echo "<form action=\"bensa.php\" method=\"POST\">
	<tr bgcolor=$vari>
	<td onclick=\"muokkaa(this,pvm,$pvm)\">$pvm</td>
	<td onclick=\"muokkaa(this,tankattu,$tankattu)\">$tankattu l</td>
	<td onclick=\"muokkaa(this,ajettu,$ajettu)\">$ajettu km</td>
	<td onclick=\"muokkaa(this,hinta,$hinta)\">$hinta €</td>
	<td onclick=\"muokkaa(this,kustannus,$kustannus)\">$kustannus €</td>
	<td><input type=\"submit\" value=\"Update\"></p></td>
	<input type=\"hidden\" name=\"Update\" id=\"Update\" value=\"Update\">
	<input type=\"hidden\" name=\"id\" id=\"id\" value=\"$id\">
	<input type=\"hidden\" name=\"pvm\" id=\"pvm\" value=\"$pvm\">
	<input type=\"hidden\" name=\"tankattu\" id=\"tankattu\" value=\"$tankattu\">
	<input type=\"hidden\" name=\"ajettu\" id=\"ajettu\" value=\"$ajettu\">
	<input type=\"hidden\" name=\"hinta\" id=\"hinta\" value=\"$hinta\">
	<input type=\"hidden\" name=\"kustannus\" id=\"kustannus\" value=\"$kustannus\">
	</tr>
	</form>";

 }?>
</table>

Koodista jätin pastettamatta "turhia" pois lyhentääkseni postauksen kokoa. Kysymykseni kuuluukin, miksi tuo ei toimi? :) UPDATE -komento siirtyy sql-serverille kyllä, mutta alkuperäisillä arvoilla, jotka haettiin queryllä :(

Toinen kysymys koskee optimointia. Kuinka ylläoleva olisi järkevä tehdä?

- AnttiK

Sulla on noi hidden tyyppiset kentät tossa samassa formissa ja PHP:n aivovapaudesta johtuen se aina korvaa formilla ensin tulevan arvon formilla myöhemmin tulevalla arvolla.

Eli ihan sikanopea purkkaviritys olisi vaan siirtää noi hidden-kentät ennen varsinaisia rivejä. Parempi ratkaisu olisi ehkä muuttaa noiden hiddenkenttien nimet esim. "dummy_tankattu", "alkup_tankattu" tms. Ja ehkä vielä parempi olisi poimia ne arvot suoraan siitä muokattavasta taulukosta (tumettaja antoikin jo tästä esimerkin), jolloin koko hidden fieldejä ei tarvita.

Tulin kanssa siihen tulokseen, että arvot olisi hyvä poimia suoraan muokattavasta taulukosta. Ei vain nyt taidot riitä sen toteuttamiseen. Oletan sen olevan erittäin simppeli toteuttaa, mutta aivopuolisko lyö tyhjää tällä hetkellä :)

Jokainen arvo on muokattavissa, joten UPDATE tarvitsisi ainoastaan ID:n sekä td-solun päivitetyn arvon. Vai olenko hakoteillä? Tällä hetkellä joudun siirtämään jokaisen solun ko. riviltä UPDATE:lle

Antti kirjoitti:

Valmista koodia saa kysyä ja antaa vastaukseksi. Usein toimiva koodi kertoo enemmän kuin hyväkin selitys.

Varsinkin jos sitä on kommentoitu tai toimintaa muuten selitetty.

Kas käy threadi jo sen verta pitkäksi, että olin yhden kommentin kokonaan missannut :) Joten testataan sitä käytännössä.

Eli miten saan form:lle siirrettyä uuden hidden arvon, joka annetaan funktion muokkaa() tekemässä tekstikentässä? Oletan tämän tapahtuvan javascriptin avulla, mutta esimerkeistä en löydä mitään mitä tähän voisi soveltaa. Varsinkin kun javascriptaus on täysin tuntematon minulle...