11548 sujets

JavaScript, DOM et API Web HTML5

Problème pour supprimer une balise [resolu]

Bonjour à tous,

Je souhaite supprimer définitivement la ligne d'un tableau. Dans mon exemple la ligne est bien supprimée (tr disparait totalement) mais tbody, lui, devient <tbody/> après la suppression (je ne suis donc plus conforme à la norme xhtml). Existe t-il un moyen de supprimer complètement la balise ?

Je ne souhaite pas remonter jusqu'à table car je pourrais avoir plusieurs tbody et que la suppression à partir de table m'effacerait toutes mes lignes (dans mon exemple).

Voudriez vous bien m'aider ?

Sylvain.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Supprimer un menu</title>
<script>
function supprimerLigneTableau()
{
 var balise=document.getElementById("Menu14");
 var baliseTd=balise.parentNode;
 var baliseTr=baliseTd.parentNode;
 var baliseTbody=baliseTr.parentNode;
 while (baliseTbody.hasChildNodes())
 {
	var premierEnfant=baliseTbody.firstChild;
	baliseTbody.removeChild(premierEnfant);
 }
}</script>
</head>
<body>
<h3>SUPPRIMER UN MENU</h3>
 <p><u>Cocher la (ou les) case(s) pour supprimer definitivement le (ou les) menu(s)</u></p>
 <table class="TableCheckbox" id="supprimer_menu">
	<tbody>
	 <tr>
		<td><input id="Menu14" type="checkbox" name="supprimer_menu" value="14" /></td>
	  <td>Saisir le nom ici</td>
	 </tr>
  </tbody>
 </table>
 <br />
 <span style="color:red;" onclick="supprimerLigneTableau();">Cliquer ici pour supprimer la ligne</span>
</body>
</html>

Modifié par sylvainmart (29 Jun 2007 - 17:26)
essay de faire un truc du genre 


taTable.getElementsByTagName('td');
if(taTable.length== 0)
taTable.parentNode.removeChild(taTable);

en gros a chque supression tu teste si ta table est vide si elle est vide tu l'enleve sinon tu fait rien ^^
Modifié par hakkou (29 Jun 2007 - 12:42)
Merci hakkou d'avoir répondu.

Cette solution ne fonctionne pas ou je ne parviens pas à la mettre en oeuvre pour mon bout de programme.
Finalement on peut résoudre le problème comme ça :

var allInputsCheckbox = document.getElementsByTagName("input");
  if(allInputsCheckbox != null)
  {
   for(var i = 0; i < allInputsCheckbox.length;i++) 
	 {
    if(allInputsCheckbox[i].type == "checkbox")
	  {
	   if (allInputsCheckbox[i].checked == true)
		 {
		  //alert (i);
		  var valeurInputsCheckbox=allInputsCheckbox[i].value;
			var valeurId="Menu" + valeurInputsCheckbox;
			var baliseTbodyCheckbox=document.getElementById(valeurId);
			baliseTbodyCheckbox.removeChild(baliseTbodyCheckbox.firstChild);
			i--;
		 }//fin if
    }//fin if
   }//fin for
	}//fin if
	var allTbodyCheckbox = document.getElementsByTagName("tbody");
	if(allTbodyCheckbox != null)
  {
   for(var i = 0; i < allTbodyCheckbox.length;i++)
	 {
	  if (allTbodyCheckbox[i].firstChild == null)
		{
		 allTbodyCheckbox[i].parentNode.removeChild(allTbodyCheckbox[i]);
		 i--;
		}
	 }
	}
[/i][/i][/i][/i][/i][/i]
sylvainmart a écrit :
Bonjour à tous,

Je souhaite supprimer définitivement la ligne d'un tableau. Dans mon exemple la ligne est bien supprimée (tr disparait totalement) mais tbody, lui, devient <tbody/> après la suppression (je ne suis donc plus conforme à la norme xhtml). Existe t-il un moyen de supprimer complètement la balise ?

Je ne souhaite pas remonter jusqu'à table car je pourrais avoir plusieurs tbody et que la suppression à partir de table m'effacerait toutes mes lignes (dans mon exemple).

Voudriez vous bien m'aider ?

Sylvain.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Supprimer un menu</title>
<script>
function supprimerLigneTableau()
{
 var balise=document.getElementById("Menu14");
 var baliseTd=balise.parentNode;
 var baliseTr=baliseTd.parentNode;
 var baliseTbody=baliseTr.parentNode;
 while (baliseTbody.hasChildNodes())
 {
	var premierEnfant=baliseTbody.firstChild;
	baliseTbody.removeChild(premierEnfant);
 }
}</script>
</head>
<body>
<h3>SUPPRIMER UN MENU</h3>
 <p><u>Cocher la (ou les) case(s) pour supprimer definitivement le (ou les) menu(s)</u></p>
 <table class="TableCheckbox" id="supprimer_menu">
	<tbody>
	 <tr>
		<td><input id="Menu14" type="checkbox" name="supprimer_menu" value="14" /></td>
	  <td>Saisir le nom ici</td>
	 </tr>
  </tbody>
 </table>
 <br />
 <span style="color:red;" onclick="supprimerLigneTableau();">Cliquer ici pour supprimer la ligne</span>
</body>
</html>



Ce que tu dis n'a pas de sens. Ce que te montre firebug lorsque tu regardes le DOM n'est pas du réél code xHTML c'est la réprésentation abstraite de ton DOM.

et si tu vois <tbody/> cela ne veut en aucun cas dir que tu n'es pas conforme à la norme xHTML, mais juste un tips pour firebug pour te dire que ton tbody est vide.
Ok, je ne le savais pas. Merci de l'info, elle est très interessante.

La suppression des tbody virtuels est cependant nécéssaire pour ce que je veux faire car je me retrouve avec des lignes blanches après la suppression des checkbox, et ce n'est pas très joli visuellement.
sylvainmart a écrit :
Ok, je ne le savais pas. Merci de l'info, elle est très interessante.

La suppression des tbody virtuels est cependant nécéssaire pour ce que je veux faire car je me retrouve avec des lignes blanches après la suppression des checkbox, et ce n'est pas très joli visuellement.

normalement tu as un seul Tbody par tabelau et le tbody englobe tous les TR
donc si tu supprimes une ligne, tu supprimes le TR mais il doit te rester d'autres TR dans ce cas.
Sinon c'est que ya un gros bordel dans ta facon de faire ta page et ton appli
Il y a en effet un bordel dans la mise en page car pour chaque tr j'ai un tbody. Encore quelque chose que je ne savais pas. Je vais corriger cela.

Merci Gatsu35.
Sujet clos
Aller à