Tabellenzelle via ondblclick bearbeiten funktioniert, aber frage!

judokar88 · 24. Juni 2014

Servus ihr Lieben,

ich habe folgendes Vorhaben: per ondblclick soll eine Tabellenzelle editiert werden können. Das Script dazu funktioniert. Mein Problem ist nun folgendes: wenn in einer Zelle via ondblclick das <form> geöffnet wurde und ich in eine andere Zelle klicke, soll die vorher angeklickte Zelle wieder "zuklappen", ohne, dass mit dem Inhalt etwas passiert. Mittels der 2 <img>-Tags soll das Formular dann abgeschickt oder zurückgesetzt werden (das bekomm ich auch noch hin).

Meine Gedanken, Ansätze, Ideen :

PHP:

<script type="text/javascript" >
function a(item, value){
	// Christian Nagel Cell DoubleClickHandler for ediTables
	elem = document.getElementById(item);
	elem.innerHTML = "<td id='"+item+"' ondblclick=\"cellDblClick('"+item+"');\">"+value+"</td>";
	}

function cellDblClick(item) {
	// Christian Nagel Cell DoubleClickHandler for ediTables
	elem = document.getElementById(item);
	val  = elem.innerHTML;

	size = elem.innerHTML.toString().length;

	elem.innerHTML = "<form  name='input_form' action='edit.php' method='get'> " +
					 "<input name='id' type='hidden' value='' /> " +
					 "<input onblur=\"a('"+item+"','"+val+"');\" class='textfield_effect' type='text' value='" + val + "' size='"+size+"'/>" +
					 "</form>"+
                     "<a href='profil.php'><img src='../images/style/accept.png'  width='25'  height='25'/></a>"+
                     "<img src='../images/style/cancel.png'  width='25'  height='25'/>";
    document.input_form.id. value = item;
	document.input_form.setData.focus();
}
</script>



<?php
$user = $_SESSION['user'];

echo "Für folgenden User wird das Profil angezeigt: $user";
require_once('sql.php');
$a = sel("*","user"); // SQL Abfrage   
while($row =mysql_fetch_row($a)){
    if($row[3] == $user){
     echo"
        <table border='1'>
                <tr><th>Name</th> <td class='edit' id='name' ondblclick=\"cellDblClick('name');\">$row[1]</td></tr>
                <tr><th>Vorname</th> <td class='edit' id='vorname' ondblclick=\"cellDblClick('vorname');\">$row[2]</td></tr>
                <tr><th>Passwort</th> <td id='passwort' ondblclick=\"cellDblClick('passwort');\">*****</td></tr>
                <tr><th>Straße/ Nr.</th><td id='strasse' ondblclick=\"cellDblClick('strasse');\">$row[6]</td><td id='nr' ondblclick=\"cellDblClick('nr');\">$row[7]</td></tr>
                <tr><th>PLZ</th><td id='plz' ondblclick=\"cellDblClick('plz');\">$row[9]</td></tr>
                <tr><th>Passnummer</th><td id='passnr' ondblclick=\"cellDblClick('passnr');\">$row[8]</td></tr>
                <tr><th>E-Mail</th><td id='email' ondblclick=\"cellDblClick('email');\">$row[10]</td></tr>
                <tr><th>Telefon</th><td id='tele' ondblclick=\"cellDblClick('tele');\">$row[11]</td></tr>
                <tr><th>Handy</th><td id='handy' ondblclick=\"cellDblClick('handy');\">$row[12]</td></tr>
                <tr><th>Sra ?</th><td>"; if($row[13] == 1){echo"ja";}else{echo"nein";}echo"</td></tr>
        </table>
     ";
    };
}




  ?>

Momentan funktioniert es so, dass ich via Doppelklick das <form> auftaucht und ich das bearbeiten kann. Da kein Autofokus auf dem <input> liegt, wird das onblur nicht gefired. 2 Probleme bestehen:
1. Klicke ich das Textfeld an und ändere etwas, kann ich nicht mehr submiten / Reseten via <img>
2. Klicke ich das Textfeld nicht an und klicke eine andere Zelle an, so wir die alte Zelle nicht "zugeklappt" (da onblur logischerweise nicht gefired wird)

Ich hoffe mir kann jemand helfen !

Liebe Grüße
Dennis / Judokar88

kkapsner · 24. Juni 2014

Das onblur ist einfach das falsche Event für das, was du haben willst. Ich würde ja auf das document ein onclick legen, das prüft, ob das angeklickte Element wirklich außerhalb des <td>s liegt. In etwa so:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<table>
	<tr>
		<td>test1</td>
		<td>test2</td>
		<td>test3</td>
		<td>test4</td>
	</tr>
</table>
<script type="text/javascript" src="//kkjs.kkapsner.de/modules/kkjs.load.js"></script>
<script type="text/javascript">
kkjs.event.add(kkjs.css.$("td"), "dblclick", function open(){
	kkjs.event.remove(this, "dblclick", open);
	var oldValue = this.innerHTML;
	var This = this;
	function close(ev){
		if (!ev || !kkjs.node.contains(This, ev.target)){
			This.innerHTML = oldValue;
			kkjs.event.remove(document, "click", close);
			kkjs.event.add(This, "dblclick", open);
		}
	}
	kkjs.event.add(document, "click", close);
	kkjs.node.clear(this);
	var textarea = kkjs.node.create({
		tag: "textarea",
		value: oldValue
	});
	kkjs.node.create({
		tag: "form",
		target: "target.php",
		method: "POST",
		childNodes: [
			textarea,
			{
				tag: "button",
				childNodes: ["save"]
			}
		],
		events: {
			submit: function(){
				oldValue = textarea.value;
				close();
			}
		},
		parentNode: this
	});
});
</script>
</body>
</html>

j-l-n · 25. Juni 2014

Noch zwei Bemerkungen:
-du solltest keine globalen Variablen verwenden! Vor allem, da sie hier ohnehin komplett unnötig sind.
-zum PHP-Code:
1.) Variablen sollten nicht einfach in einen String geschreiben werden. Stattdessen baut man das mit einem Punkt dazwischen zusammen:

PHP:

echo "String mit Variable ".$variable.", die vor diesem Teil eingebaut wurde.";

2.) Solche langen Passagen mit echo auszugeben ist viel zu umständlich. Das geht so viel einfacher, dann musst du nämlich Anführungszeichen auch nicht escapen:

PHP:

<?php 
$user = $_SESSION['user']; 

echo "Für folgenden User wird das Profil angezeigt: $user";
require_once('sql.php'); 
$a = sel("*","user"); // SQL Abfrage    
while($row =mysql_fetch_row($a)){ 
  if($row[3] == $user){ ?>
     <table border='1'>
       <tr>
         <th>Name</th>
         <td class='edit' id='name' ondblclick="cellDblClick('name');">
           <?php echo $row[1]; ?>
         </td>
       </tr>
       <!-- usw. -->
<?php } ?>

PS: deine Einrückung ist irgendwie etwas seltsam und unübersichtlich...

Tabellenzelle via ondblclick bearbeiten funktioniert, aber frage!

judokar88

New member

kkapsner

Super Moderator

j-l-n

Guest