Εμφάνιση πεδίων φόρμας για edit

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
txc
Δημοσιεύσεις: 627
Εγγραφή: 02 Δεκ 2003 23:08

Εμφάνιση πεδίων φόρμας για edit

Δημοσίευση από txc » 13 Απρ 2011 10:54

Καλημέρα παιδιά,
μια ερώτηση, έχω ένα table που σε κάθε td του εμφανίζω data από ένα select

έχω δίπλα ένα κουμπί που πατώντας το θέλω να κάνω edit τη συγκεκριμένη εγγραφή που έχει επιλεχθεί.
θα μπορούσα να το κάνω σε μια νέα σελίδα αλλά θέλω να το κάνω πάνω στην ίδια φόρμα

καμιά ιδέα πως πατώντας στο κουμπί να ενεργοποιούνται τα πεδία της συγκεκριμένης εγγραφής?

σκέφτηκα πρόχειρα μέσα σε κάθε td να βάλω input type Κλπ. και στην αρχή να είναι disabled Και με το κλικ στο κουμπί να γίνεται enabled, αλλά μου βάζει by default background και δεν μπορώ να το βγάλω από το input type

οποιαδήποτε βοήθεια ευπρόσδεκτη
Ευχαριστώ

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Εμφάνιση πεδίων φόρμας για edit

Δημοσίευση από korgr » 13 Απρ 2011 13:54

Δηλαδή αν ορίσεις σε αυτά τα inputs κάποια class με background:transparent; border:0 κλπ δεν υπακούει?
Η άλλη λύση είναι να εμφανίζεις ένα ορατό table row με τα περιεχόμενα της εγγραφής και το κουμπάκι edit όπως το έχεις τώρα, και από κάτω ένα table row με display:none που θα περιέχει το input textfield για το edit.
Με το κουμπακι edit κάνεις απλά toggle την ορατότητα αυτών των table-rows

txc
Δημοσιεύσεις: 627
Εγγραφή: 02 Δεκ 2003 23:08

Εμφάνιση πεδίων φόρμας για edit

Δημοσίευση από txc » 13 Απρ 2011 18:29

αυτή ακριβώς τη λύση σκέφτηκα και εγώ , να εμφανίζω / αποκρύπτω τα δύο tables, αλλά δεν ξέρω όταν πατάω στο κουμπί edit αν θα εμφανίζεται στο νέο table η συγκεκριμένη εγγραφή για edit ή όλες

θα το κοιτάξω

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Εμφάνιση πεδίων φόρμας για edit

Δημοσίευση από korgr » 13 Απρ 2011 20:07

Ένα table θα έχεις και αυτό θα είναι πάντα ορατό.
Αυτά που θα εμφανίζεις/κρύβεις είναι τα εκάστοτε tr (table rows)

ένα παράδειγμα στα γρήγορα

Κώδικας: Επιλογή όλων

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script type="text/javascript">
function edit&#40;id, showID&#41;&#123;
	var tr1 = document.getElementById&#40;id&#41;;
	var tr2 = document.getElementById&#40;showID&#41;;
	tr1.style.display="none";
	tr2.style.display="table-row";
&#125;
function save&#40;elm&#41;&#123;
	v = elm.value;
	id= elm.id;
	var ajaxURL = "save.php?id="+id+"&value="+v;
	alert&#40;ajaxURL&#41;;
	// do ajax call
&#125;
</script>
</head>

<body>
<form action="" method="get">
<table>
	<tr id="record1">
		<td><a href="javascript&#58;edit&#40;'record1', 'field1'&#41;">Τίτλος εγγραφής Νο 1</a></td>
	</tr>
	<tr id="field1" style="display&#58;none">
		<td><input id="1" name="fieldname" type="text" value="Τίτλος εγγραφής Νο 1" size="50" onchange="save&#40;this&#41;"></td>
	</tr>	
	<tr id="record2">
		<td><a href="javascript&#58;edit&#40;'record2', 'field2'&#41;">Τίτλος εγγραφής Νο 2</a></td>
	</tr>
	<tr id="field2" style="display&#58;none">
		<td><input id="2" name="fieldname" type="text" value="Τίτλος εγγραφής Νο 2" size="50" onchange="save&#40;this&#41;"></td>
	</tr>		
	<tr id="record3">
		<td><a href="javascript&#58;edit&#40;'record3', 'field3'&#41;">Τίτλος εγγραφής Νο 3</a></td>
	</tr>
	<tr id="field3" style="display&#58;none">
		<td><input id="3" name="fieldname" type="text" value="Τίτλος εγγραφής Νο 3" size="50" onchange="save&#40;this&#41;"></td>
	</tr>		
</table>

</form>
</body>
</html>

txc
Δημοσιεύσεις: 627
Εγγραφή: 02 Δεκ 2003 23:08

Εμφάνιση πεδίων φόρμας για edit

Δημοσίευση από txc » 15 Απρ 2011 22:12

Thanks

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 2 επισκέπτες