modifier tableau directement d'une page web

[invitec7fd8fb0]

bonjour,
dans une page de site que je devellope, j'affiche un tableau contenant les titres des livres , l'auteur ....
pour modifier les informations sur un livre l'utilisateur doit cliquer sur la cellule du titre puis le lien va l'envoyer a une autre page qui contient des textfields pour modifier
alors j'aimerai savoir est ce que il est possible que l'utilisateur modifie directement dans la cellule puis on confirme avec une boite de dialogue avec javascript

merci
-----

[invite1445654e]

bonjour,
dans une page de site que je devellope, j'affiche un tableau contenant les titres des livres , l'auteur ....
pour modifier les informations sur un livre l'utilisateur doit cliquer sur la cellule du titre puis le lien va l'envoyer a une autre page qui contient des textfields pour modifier
alors j'aimerai savoir est ce que il est possible que l'utilisateur modifie directement dans la cellule puis on confirme avec une boite de dialogue avec javascript

merci

chalut
bien sur je présume que tu as généré la page via php
tu peux tres bien creer un formulaire qui contiendra les champs en hidden que tu enverras a ta page de modification
sur chaque champ modifiable il suffira de modifier la valeur du champ hidden correspondant
et sur le lien de mise a jour tu renseignes l'identifiant de l'enregistrement comme cela tu as pas besoin de nommer chaque champ modifiable

[invite765732342432]

C'est effectivement possible, mais il faut t'intéresser à l'utilisation d'AJAX pour l'enregistrement.
Voici ce que j'avais fait pour la gestion de contacts:
Ce n'est pas forcément très propre, mais ça marche pas mal.

<table id="contactstable"><caption>Vos contacts</caption>
<tr><td></td><td>Id</td><td>Surnom</td><td>Nom</td><td>Naiss</td><td>Portable</td><td>Fix</td><td>email</td><td>Adresse</td><td>Comment.</td></tr>
</table>
<br>
<a onclick="contactsAddNewLine();">Ajouter</a> 
<a onclick="contactsSave();hideEditMode('contacts');">Enregistrer</a>

<script>
function contactsAddNewLine() {
	var id = 1;
	// Chercher l'id maximum
	var tbl = document.getElementById('contactstable').getElementsByTagName('tr');
	for (var i=1; i < tbl.length; i++) {
		var tbl1 = tbl[i].getElementsByTagName('td');
		id = Math.max(id, 1+parseInt(tbl1[1].innerHTML));
	}

	var newRow = document.getElementById('contactstable').insertRow(-1);
	var newCell = newRow.insertCell(0);
	newCell.innerHTML = "<a onclick=\"contactsDelete("+id+");\">X</a>";
	var newCell = newRow.insertCell(1);
	newCell.innerHTML = id;
	
	var tbl1 = tbl[0].getElementsByTagName('td');
	for (var i=2; i < tbl1.length; i++) {
		newCell = newRow.insertCell(i);
		newCell.innerHTML = '<a onclick="contactsChangeValForm('+id+', '+i+');" class="contactsEdit">[new]</a>';
	}

}

function contactsDelete(id) {
	var tbl = document.getElementById('contactstable').getElementsByTagName('tr');
	for (var i=1; i < tbl.length; i++) {
		var tbl1 = tbl[i].getElementsByTagName('td');
		tmpId = parseInt(tbl1[1].innerHTML);
		if (tmpId == id) {
			document.getElementById('contactstable').deleteRow(i);
			break;
		}
	}
}

function contactsChangeValForm(id, col) {
	var htmlRowId = -1
	// Find row html id
	var tbl = document.getElementById('contactstable').getElementsByTagName('tr');
	for (var i=1; i < tbl.length; i++) {
		var tbl1 = tbl[i].getElementsByTagName('td');
		if (parseInt(tbl1[1].innerHTML) == id) {
			htmlRowId = i;
			break;
		}
	}
	if (htmlRowId < 0) return;
	
	var cell = tbl[htmlRowId].getElementsByTagName('td')[col];
	inputname = 'contactsForm'+id+'-'+col;
	cellContent = cell.getElementsByTagName('a')[0].innerHTML;
	if (cellContent == '[new]') cellContent = '';
	cell.innerHTML = '<input type="text" id="'+inputname+'" value="'+cellContent+'" size="20" onblur="contactsChangeVal('+id+', '+col+')">';
	document.getElementById(inputname).focus();
}

function contactsChangeVal(id, col) {
	// retrieve user input
	inputname = 'contactsForm'+id+'-'+col;
	cellContent = document.getElementById(inputname).value;
	if (cellContent == '') cellContent = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
	
	var htmlRowId = -1
	// Find row html id
	var tbl = document.getElementById('contactstable').getElementsByTagName('tr');
	for (var i=1; i < tbl.length; i++) {
		var tbl1 = tbl[i].getElementsByTagName('td');
		if (parseInt(tbl1[1].innerHTML) == id) {
			htmlRowId = i;
			break;
		}
	}
	if (htmlRowId < 0) return;

	var cell = tbl[htmlRowId].getElementsByTagName('td')[col];
	// bring back celle to uneditable but changeable format
	cell.innerHTML = '<a onclick="contactsChangeValForm('+id+', '+col+');" class="contactsEdit">'+cellContent+'</a>';
}

function contactsEdit() {
	// to changeable format
	var tbl = document.getElementById('contactstable').getElementsByTagName('tr');
	for (var i=1; i < tbl.length; i++) {
		var tbl1 = tbl[i].getElementsByTagName('td');
		var id = parseInt(tbl1[1].innerHTML);
		tbl1[0].innerHTML = "<a onclick=\"contactsDelete("+id+");\">X</a>"
		for (var j=2; j < tbl1.length; j++) {
			if (tbl1[j].innerHTML == '') tbl1[j].innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
			tbl1[j].innerHTML = '<a onclick="contactsChangeValForm('+id+', '+j+');" class="contactsEdit">'+tbl1[j].innerHTML+'</a>';
		}
	}
	
}

function contactsSave() {
	// back to fixed format
	var tbl = document.getElementById('contactstable').getElementsByTagName('tr');
	for (var i=1; i < tbl.length; i++) {
		var tbl1 = tbl[i].getElementsByTagName('td');
		tbl1[0].innerHTML = '';
		for (var j=2; j < tbl1.length; j++) {
			tbl1[j].innerHTML = tbl1[j].getElementsByTagName('a')[0].innerHTML;
		}
	}
	
	// send data to be save
	var reg=new RegExp("([;|])", "g");
	var reg2=new RegExp("(&nbsp;)", "g");
	var details='';
	for (var i=1; i < tbl.length; i++) {
		var tbl1 = tbl[i].getElementsByTagName('td');
		var tmpDet = tbl1[1].innerHTML; // id
		for (var j=2; j < tbl1.length; j++) {
			tmpDet += ';' + tbl1[j].innerHTML.replace(reg2, '').replace(reg, '');
		}
		if (details != '') details += '|';
		details += tmpDet;
	}
	sendServerInfo('Contacts.inc.php', new Array(new Array('ajaxQuery', 'contacts-save')
		, new Array('details', details)
		));
}

</script>

[invitec7fd8fb0]

dans mon cas la table est deja existante, elle est chargé depuis la base de données
j 'ai reussi a permettre de modifier les valeurs des cellules de la table
mais j'ai un bouton au dessous de la table je veux que lorsque le user clique sur lui et la table modifié se stock dans la base de donnés
alors je sais pas comment regrouper les elements de la table pour ca


merci

[A voir en vidéo sur Futura]

[invitea0ecda6e]

Qu'est ce que tu as dans ta table ? Est-ce que ce sont des input text ?
Donne nous un peu de ton code et on pourra t'aider.

Une solution élégante est d'utiliser AJAX pour mettre à jour directement tes données sans recharger la page. As-tu déjà fait ça ?

[invite765732342432]

dans mon cas la table est deja existante, elle est chargé depuis la base de données

Celle que j'utilise d'habitude est déjà remplie, ça marche aussi.

mais j'ai un bouton au dessous de la table je veux que lorsque le user clique sur lui et la table modifié se stock dans la base de donnés
alors je sais pas comment regrouper les elements de la table pour ca

La fonction "contactsSave()" ne te semble pas faire ce que tu demandes ?

Je peux difficilement te donner plus de code. Si ce n'est pas suffisant, il va falloir retourner aux bases:
- est-ce un exercice ou un projet personnel
- quel est ton niveau en info (et en langages web genre php)
- as-tu déjà utilisé ajax ou une techno ressemblante
- sais tu accéder à une base de données en PHP (ou autre, selon ce que tu utilises)
- sais-tu utiliser SQL

On y verra déjà plus clair.

[invite1445654e]

dans mon cas la table est deja existante, elle est chargé depuis la base de données
j 'ai reussi a permettre de modifier les valeurs des cellules de la table
mais j'ai un bouton au dessous de la table je veux que lorsque le user clique sur lui et la table modifié se stock dans la base de donnés
alors je sais pas comment regrouper les elements de la table pour ca


merci

on a besoin de plus d'informations
qu'est ce qui tourne sur ton serveur web php asp etc ?

[invitec7fd8fb0]

merci pour votre soutien

Qu'est ce que tu as dans ta table ? Est-ce que ce sont des input text ?
Donne nous un peu de ton code et on pourra t'aider

avec php et mysql, j'affiche le contenu d'une table mysql a travers :

<?php
		try
		{
			// On se connecte à MySQL
			$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
			$bdd = new PDO('mysql:host=localhost;dbname=biblio', 'root', '', $pdo_options);
			
			// On récupère tout le contenu de la table jeux_video
			$reponse = $bdd->query('SELECT * FROM ouvrage');
			
			// On affiche les titres des colonnes
			echo '<table id="myTable" class="editable">
				<tr>
					<th>Titre</th>
					<th>Auteur</th>
					<th>Edition</th>
					<th>Catégorie</th>
					<th>Totale des exemplaires </th>
					<th>Totale des Exemplaires sorties</th>
				</tr>';
			//les lignes
			while ($donnees = $reponse->fetch())
			{
			?>
				<tr>
					<td><?php echo $donnees['Titre']; ?></td>
					<td><?php echo $donnees['Auteur']; ?></td>
					<td><?php echo $donnees['Edition']; ?></td>
					<td><?php echo $donnees['Categorie']; ?></td>
					<td><?php echo $donnees['NbreExT']; ?></td>
					<td><?php echo $donnees['NbreExP']; ?></td>
				</tr>
			<?php
			}
			$reponse->closeCursor(); // Termine le traitement de la requête
		}
		catch(Exception $e)
		{
			// En cas d'erreur précédemment, on affiche un message et on arrête tout
			die('Erreur : '.$e->getMessage());
		}
	?>	
	</table>

et alors avec un script javascript que j'ai trouvé a l'internet :

/**
 * Script to make an div or table cell editable
 * Set class of the element to 'editable' and include this file in the head of the html page
 * 
 * http://iambot.net/projects/editablejs/
 * 
 * Version: 0.3
 * @author Srinath
 * @email srinath@iambot.net
 *
 */

var EDITABLE;

EDITABLE = function() {
	// Declare a few variables
	var _target = null, // Parent node of the element to be made editable
	_child = null, // The element to be made editable
	_flag = false, // Flag to indicate if any element is being edited
	_node = null, // Node to be replaced. Can either be textNode or simpleNode
	_textNode = null, // A input element of type text for use in tables
	_simpleNode = null, // A textarea element for other elements
	_oldValue = null, // To hold the previous value in case we need to restore it
	_value = null,
	_url = false;

	return {
		
		init: function(url) {
			_simpleNode = document.createElement('textarea');
			_simpleNode.className = 'editing';
			_simpleNode.onkeydown = EDITABLE.updateKey;

			_textNode = document.createElement('input');
			_textNode.type = 'text';
			_textNode.className = 'editing';

			document.onclick = EDITABLE.updateClick;
			
			if(document.getElementsByClassName) {
				elements = document.getElementsByClassName('editable');
			}		
			else {
				elements = getElementsByClassName('editable');
			}	
			
			for(var i=0;i<elements.length;i++) {
				if(elements[i].tagName == 'table' || elements[i].tagName == 'TABLE') {
					var cells = elements[i].getElementsByTagName('td');
					for(j=0;j<cells.length;j++) {
						cells[j].className = 'editable';
						cells[j].onclick = EDITABLE.editNode;
						cells[j].onkeydown = EDITABLE.updateKey;
					}
				}
				else {
					elements[i].onclick = EDITABLE.editNode;
					elements[i].onkeydown = EDITABLE.updateKey;
				}
			}
			
			if(url) {
				_url = url;
			}
		},
		
		updateKey: function(e) {
			if(_flag) {
				if(e == null) {
					e = window.event;
				}
				if(window.event) {
					_key = window.event.keyCode;
				}
				else {
					_key = e.which;
				}
				if(_key != 9 && _key != 13) {
					_node.focus();
					return;
				}
				else {
					try {
						EDITABLE.replaceNode();
						_child.innerHTML = _key == 9 ? _oldValue : _node.value;
						return false;
					} catch (ex) {alert(ex);}
				}	
			}
		},
		
		updateClick: function(e) {
			if(_flag) {
				if(e == null) {
					e = window.event;
				}
				_temp = e.target != null ? e.target : e.srcElement;
				if(_temp.className != 'editable') {
					try {
						EDITABLE.replaceNode();
					} catch(ex) {alert(ex);}
				}
			}
		},
		
		replaceNode: function() {
			_child.removeChild(_node);
			_child.className = 'editable';
			_child.innerHTML = _oldValue;
			_flag = false;
			if(_url) {	
				EDITABLE.updateDB(_node);
			}
		},
		
		updateDB: function(node) {
			if (window.XMLHttpRequest) {
				xmlhttp = new XMLHttpRequest();
			}
			else {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.open("GET",_url+"?id="+node.id+"&value="+node.value,true);
			xmlhttp.setRequestHeader('User-Agent','XMLHTTP/1.0');
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState != 4) {
					return;
				}
				if (xmlhttp.status != 200 && xmlhttp.status != 304) {
					alert('HTTP error ' + xmlhttp.status);
					return;
				}
			};
			if (xmlhttp.readyState == 4) {
				return;
			}
			xmlhttp.send();
		},
		
		editNode: function(e) {
			if(!_flag) {
				if(e == null) {
					e = window.event;
				}
				_child = e.target != null ? e.target : e.srcElement;
				if(_child.className == 'editable') {
					if(e.preventDefault) { 
						e.preventDefault();
						e.stopPropagation();
					}
					else { 
						e.cancelBubble = true;
						e.returnValue = false;
					}
					if(_child.tagName == 'TD' || _child.tagName == 'td') {
						_node = _textNode;
					}
					else {
						_node = _simpleNode;
						_node.style.border = 0;
						_node.style.padding = 0;
					}
					_target = _child.parentNode;
					_node.id = _child.id;
					_node.style.width = _child.offsetWidth+'px';
					_node.style.height = _child.offsetHeight+'px';
					
					if(_target) {
						var value = _child.innerHTML.replace(/\t/gi,'');
						_node.value = value.replace(/^\s*/gi,'');
						_child.className = 'editable editing';
						_oldValue = _child.innerHTML;
						_child.innerHTML = '';
						try {
							_child.appendChild(_node);
							_flag = true;
							_node.focus();
							val = _node.value;
							_node.value = '';
							_node.value = val;
						} catch (exp) {alert(exp);}
					}
				}
			}
			else {
				try {
					EDITABLE.replaceNode();
				} catch(ex) {alert(ex);}
			}
		}
	};
}();

et je l'ajoute dans le head de ma page php comme ca

<script type="text/javascript" src="editable.js"></script>

et sous la table comme ca

<script type="text/javascript">EDITABLE.init();</script>

et op les cellules de ma table deviennent editable sans avoir comprendre le script
alors ce que je veux maintenant est : apres que l'utilisateur modifie les cellules de tableau comment parcourir tous ces cellules pour enregister les modification dans la table mysql :
j'ai pas probleme de requette sql : je maitrise
mais parcourir et grouper chaque ligne de la table pour modifier l'enregistrement dans la table

et franchement j'ai executé sans comprendre le code de Faith mais j'ai pas su comment l'adapter a mon cas


merci bien

[invite1445654e]

Coucou
puis je poser une question ?
C'est pour ta culture personnelle le fameux site ?
ou pour un projet informatique dans le cadre de tes études ?
cela aussi nous permettra de mieux cibler

[invitec7fd8fb0]

le deuscieme choix
pour un projet informatique deans le cadre de mes etudes

[invitea0ecda6e]

Ca risque d'être difficile pour toi de modifier un code que tu ne comprend pas...
Si tu commences à faire du javascript avancé, il va falloir:
- Que tu apprennes à faire du JS, pourquoi ne pas commencer par des tuto? Même s'il n'ont aucun rapport avec ton projet en cours, ça peut t'aider.
- Que tu envisages l'utilisation d'un framework (jQuery, prototype, mootools...) qui va te simplifier la vie

La en l'occurence, tu n'as pas de formulaire donc ça va être compliqué de récupérer tes infos...
La 1ere chose à faire c'est de mettre tout ça dans un formulaire, ensuite tu as au moins 2 choix:
- Mettre chaque valeur dans un input
- générer un flux contenant toutes tes infos dans un input caché ou envoyé en AJAX (pour peu que tu sache utiliser AJAX)

Bon courage

[invitec7fd8fb0]

sur javascript : je suis entrain de lire mon cours
mais jquery on a pas dans le programme
a votre avis si je lis un tuto su jquery(je l'ai choisi car c'est le plus populaire que je lis sur les forums ....)
je saurai resoudre ca et d'autres probleme que je vais rencontrer par la suite sans avoir recours aux forums ..

[invitea0ecda6e]

Salut pourpo,
jquery ne figure pas dans ton programme parce que c'est 1 framework parmi plein d'autres, ce n'est pas une norme.
Si tu fais un tuto sur jquery, tu sauras un peu mieux comment ça marche mais tu ne seras malheureusement pas capable de résoudre tous les problèmes du monde en un claquement de doigt... Mais pour l'instant on a pas trouvé comment faire ça.

[invite1445654e]

sur javascript : je suis entrain de lire mon cours
mais jquery on a pas dans le programme
a votre avis si je lis un tuto su jquery(je l'ai choisi car c'est le plus populaire que je lis sur les forums ....)
je saurai resoudre ca et d'autres probleme que je vais rencontrer par la suite sans avoir recours aux forums ..

Je dirais tout dépends de tes capacités
Il est toujours bon de regarder à coté du cours car bien souvent il y a dans le cours le strict nécessaire voire moins des fois .