Discussion :

[stoner2008]

bonjour,
je vous explique la situation. je possède une page jsp qui récupère des données depuis la base de donnée et les affichent dans un tableau. devant chaque ligne j'ai un bouton qui se crée d'une façon dynamique qui a pour role de supprimer cette ligne de la table.

voici mon code jsp qui permet la récupération des données dans ma page jsp

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 <tr id="tr<%= i %>">
	<th><%= num_tel %></th>
	<th><%= messagedefile %> </th>
	<th>
		<pre><input type="button" onclick="valider(this);" value="Valider">   <input type="button" bgcolor="#FF5000" onclick="removeRow(this);" value="Supprimer">       
	</th>
</tr>

et voici mon code javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function removeRow(src)
{
	var Row = src.parentElement.parentElement;
	document.all("table1").deleteRow(Row.rowIndex);
	Valider.disabled = true;
}

le probleme ici c'est que qu'on je click sur le bouton supprimer c'est toujours la 1ere ligne (row) qui s'efface mais pas la ligne désirée.

aidez moi svp à corriger mon code
merci

[sekaijin]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function removeRow(src)
{
  var Row = src.parentElement.parentElement;
  Row.parentElement.removeChild(Row);
  Valider.disabled = true;
}

[NoSmoking]

Bonjour,
il me semble qu'il manque un niveau de parent
INPUT -> PRE -> TH -> TR
ce qui donne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var oRow = src.parentElement.parentElement.parentElement;

maintenant tu peux également utiliser un deleteRow, mais en laissant tombé cet horrible document.all.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

oRow.parentElement.deleteRow(oRow.rowIndex);

[rollbich]

bonsoir,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 document.all("table1").deleteRow(Row.rowIndex);

document.all n'est reconnu que dans internet explorer. Par conséquent, ça ne marchera pas dans les autres navigateurs.

Utilise GetElementById("table1") pour recupérer l' élément dont l'ID est "table1"

[NoSmoking]

Utilise GetElementById("table1") pour recupérer l' élément dont l'ID est "table1"

attention quand même javascript est sensible à la casse .

[Bovino]

document.all n'est reconnu que dans internet explorer.

Mouais... plus Chrome plus Opera plus Safari quand même...

Mais cela ne veut pas dire que ta remarque est fausse bien au contraire, document.all ne devrait jamais être utilisé !
Parmi les méthodes recommandées, il y a bien sûr getElementById() mais aussi querySelector(), querySelectorAll(), getElementsByTagName(), getElementsByName(), getElementsByClassName()...

[stoner2008]

merci les gars ça marche à merveille.
maintenant une fois que je clique sur le bouton supprimer une requète s'execute qui me permet de mettre à jour ma base de donnée.
je connais la requete qui me permet d'executer le traitement mais comment modifier ma fonction supprimer pour que je puisse faire la mise à jour?
voici ma fonction javascript

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<tr id="tr<%= i %>">
	<th id="th1"><%= id %></th>
	<th><%= num_tel %></th>
	<th><%= messagedefile %> </th>
	<th>
		<pre><input type="button" name="valider" value="Valider" style="background-color:#22780F;font-weight:bold;color:#ffffff; onclick="valider(this);">   <input type="button" name="delete" value="Delete" style="background-color:#ff0000;font-weight:bold;color:#ffffff;" onclick="removeRow(this);">       
	</th>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function removeRow(src)
{
	var oRow = src.parentElement.parentElement.parentElement;
	oRow.parentElement.deleteRow(oRow.rowIndex-1);
	var id = document.getElementById('th1')
	var jspcall = "edit.jsp?id="+id;
	window.location.href = jspcall;
}

la page edit.jsp permet de mettre à jour ma base mais j'ai deux questions:
1/comment trouver le bon paramettre id ( il faut que id correspond à id de la ligne supprimée)
2/ j'aimerais que la page edit.jsp soit executée en backgroud.c'est à dire que je reste toujours dans la page initial(qui affiche mon tableau initial)

NB: oRow.rowIndex est different de ID

[sekaijin]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var id = document.getElementById('tr1'); //<==================
var jspcall = "edit.jsp?id="+id; // <=======================
window.location.href = jspcall;

heu id est initialisé avec un DOMElement puis utilisé comme String
Là je comprends pas
soit tu veux l'id du DOMElement et c'est 'tr1' vu que tu fait un getElementByID
et tout ça ne sert à rien
soit tu veux passer dans l'url un DOMElement
et ça n'a absolument aucun sens


je suppose que tu veux faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
id = oRow.id;
oRow.parentElement.deleteRow(oRow.rowIndex-1)

pour ensuite faire un appel ajax "edit.jsp?id="+id;
A+JYT

[stoner2008]

Merci mais si je fais comme ça, id retourne tr0. Or moi je veux le contenu de th0 qui est un child de tr0.

J'ai fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

id = oRow.getElementById("th1")

Mais je n'obtiens aucun résultat.

[Bovino]

Tu n'obtiens rien parce que getElementById() ne s'applique qu'à l'objet document...

Ensuite, ton code est mal pensé pour ce que tu veux faire.
Si tu veux récupérer une valeur précise, place-là dans un attribut data-* que tu peux ensuite facilement récupérer avec l'objet dataset ou la méthode getAttribute().

[sekaijin]

Merci mais si je fais comme ça, id retourne tr0. Or moi je veux le contenu de th0 qui est un child de tr0.

mais utilise les éléments du DOM tu sais bien dans quel élément tu à mis les info non ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
id = oRow.firstChild().innerText;
oRow.parentElement.deleteRow(oRow.rowIndex-1)