Aller au contenu
Choisir la langue
Aller à la recherche

Forums des Zéros

Une question ? Pas de panique, on va vous aider !

Liste des forums

Partage

Alterner la couleur des lignes

Tableau dynamique - suppression de lignes

Sujet résolu

1 avril 2009 à 0:07:29

Bonjour a tous,

J'ai le code suivant pour ajouter dynamiquement des lignes dans un tableau en alternant les couleur de lignes. Ca - avec l'aide du forum - c'est bon j'ai reussi

Mon probleme: comment supprimer ces lignes si besoin en cliquant sur le "delete" tout en conservant mon alternance de couleur de ligne ?

Voici mon code:

Si quelqu'un pouvait m'aider

<html>
<head>
<script language="JavaScript" src="JavascriptTest.js">
</script> 
</head>
<label id="Label_AccountNumber" for="AccountNumber">Account Number</label>
	<input type="text" name="AccountNumber" id="AccountNumber" size="40" tabindex="1"/>
	<label id="Label_AccountCurrency" for="AccountCurrency">Currency</label>
	<select type="text" name="Select_AccountCurrency" id="Select_AccountCurrency">
<table id="Table">
	<tr>
	<td id="AccountNb">Account Number</td>
	<td id="Ccy">Currency</td>
	<td id="Delete"></td>
	</tr>
	</table>

<!--
function AddElement()
{
var AccountNb = document.getElementById("AccountNumber").value;
var Ccy = document.getElementById("Select_AccountCurrency").options[document.getElementById("Select_AccountCurrency").selectedIndex].text

var newRow = document.getElementById('Table').insertRow(-1);
newRow.style.backgroundColor = ['#FFF' /* Pair */, '#EEEFF9' /* Impair */][document.getElementById('Table').getElementsByTagName('tr').length%2];
var newCell = newRow.insertCell(0);
newCell.innerHTML = AccountNb;
newCell = newRow.insertCell(1);
newCell.innerHTML = Ccy;
newCell = newRow.insertCell(2);
newCell.innerHTML = "delete";

}
//-->

Merci ...

2 avril 2009 à 17:45:17

Quelqu'un aurait-il une idee svp ?
Je bloque depuis pas mal de jours la-dessus et j'arrive pas a m'en sortir.

6 avril 2009 à 19:14:45

Rien a faire je ne m'en sors pas.
Help svp ...

6 avril 2009 à 19:23:42

Salut,

Pourrais tu mettre tout ton code, la partie que tu as laissé est inexploitable.

Merci

6 avril 2009 à 22:00:55

Voici mon code Javascript en entier. Je suis pas certain que ce soit tres "pro" mais l'ajout des lignes fonctionne bien. Par contre pas la supression ...

J'ai le message d'erreur sivant [object Error]

Merci pour votre aide.

<!--
function AddElement()
{
var AccountNb = document.getElementById("AccountNumber").value;
var Ccy = document.getElementById("Select_AccountCurrency").options[document.getElementById("Select_AccountCurrency").selectedIndex].text

var newRow = document.getElementById('Table').insertRow(-1);
newRow.style.backgroundColor = ['#FFF' /* Pair */, '#EEEFF9' /* Impair */][document.getElementById('Table').getElementsByTagName('tr').length%2];
var newCell = newRow.insertCell(0);
newCell.innerHTML = AccountNb;
newCell = newRow.insertCell(1);
newCell.innerHTML = Ccy;
newCell = newRow.insertCell(2);
var checkbox = document.createElement('input');
checkbox.setAttribute('type', 'checkbox');
newCell.appendChild (checkbox);
}

function DeleteElement() {   
            try {   
            var table = document.getElementById(Table);   
            var rowCount = table.rows.length;   
  
            for(var i=0; i<rowCount; i++) {   
                var row = table.rows[i];   
                var chkbox = row.cells[2].childNodes[2];   
                if(null != chkbox && true == chkbox.checked) {   
                    table.deleteRow(i);   
                    rowCount--;   
                    i--;   
                }   
  
            }   
            }catch(e) {   
                alert(e);   
            }   
        }   


//-->

7 avril 2009 à 20:11:40

Je ne comprends pas tres bien ou cela bloque.
Le message d'erreur fait-il reference au fait que mon objet CheckBox n'arrive pas a etre identifier lors de la boucle ?

8 avril 2009 à 20:32:16

Help !!!
Je seche completement sur ce probleme.
Experts du javascript, j'ai besoin de votre aide !

11 avril 2009 à 1:36:15

Peronne pour m'eclairer sur ce sujet ... :-(

12 avril 2009 à 9:50:27

C'est quoi qui marches pas ? (avec des alert, tu devrais pouvoir nous donner la ligne...)

12 avril 2009 à 12:40:44

Bonjour,

Merci pour votre aide sur ce probleme.
Il semble que le probleme vienne de la ligne 25. Lorsque je mets un alert pour recuperer la variable row, j'ai un message d'erreur "[object]" qui revient autant de fois que j'ai de lignes dans mon tableau avant de disparaitre.

var row = table.rows[i];

Par contre je ne sais pas pourquoi ...

12 avril 2009 à 13:44:15

Parce que rows existe pas...
remplaces par tr ou td... je sais plus lequel correspond à une ligne...

12 avril 2009 à 15:22:46

Cela ne fonctionne toujours pas.
J'ai essayé tr et td.

Tu es sur que rows n'existe pas car ligne 22 de mon code je l'utilise et cela fonctionne bien.

Comment faire ?

12 avril 2009 à 15:37:07

Dans tous les cas, tu ferais mieux de te créer ton propre "rows" en faisant :

var table = document.getElementById("Table");
// NE PAS OUBLIER LES GUILLEMETS AUTOUR DE L'ID !!!
var my_rows = table.getElementsByTagName("tr");
var rowCount = table.my_rows.length;

12 avril 2009 à 15:50:46

Cette ligne de code fonctionne.
C'es ma boucle qui ne fonctionne pas correctement.

Mais merci du conseil.

12 avril 2009 à 18:30:37

Si tu fais un alert de rowCount, ça te donne quoi ?

12 avril 2009 à 19:05:26

Ca me donne le nombre de lignes dans mon tableau.
Ca a l'air de bloquer sur le code du sessous.

12 avril 2009 à 19:09:07

Et quand tu fais un alert(row) dans ta boucle, ça te donne quoi ?

12 avril 2009 à 22:53:07

Un message d'erreur [object] qui s'affiche autant de fois que j'ai de reiteration dans ma boucle.

12 avril 2009 à 23:05:09

... >_<...

Depuis quand [Object] est un message d'erreur... ?
C'est censé te dire que ce que tu tentes d'afficher est un Objet...

Perso, je serais quand même vachement plus confiant si tu récupérais tes <tr> de manière correcte avec un code tel que j'ai proposé précédemment...
Plutôt qu'avec ce "rows" qui me paraît bien hasardeux...

13 avril 2009 à 17:58:23

Je suis en train de re-tester mon code pour comprendre et corriger ce qui ne fonctionne pas. Je pense que cela provient de la ligne 22 de mon code javascript posté dans les posts du debut, ie la ligne qui créée ma variable case a cocher, variable qui par la suite est testée pour la suppression des lignes.
Je pense qu'elle n'est pas bien parametrée.
Quelqu'un a une idée svp ?

13 avril 2009 à 19:44:24

Bah si elle apparaît sur ta page théoriquement, c'est qu'elle est correctement créée...

Après, est-ce que tu parviens à la récupérer correctement dans la boucle, ça j'en sais rien...
Un alert() pourrait t'informer...

Et moi je maintiens que le "rows", il me paraît suspect...

13 avril 2009 à 20:43:00

Stop les bêtises, faisons ça proprement :

lien

16 avril 2009 à 2:33:43

Bon je suis finalement arrivé a mes fins ...
Dernier petit probleme, le formatage des couleurs de mes lignes lorsque je supprime une ligne. Je souhaiterais garder l'alternance des couleurs, mais cela ne fonctionne pas bien.

Quelqu'un pourrait-il m'aider svp.

Ci-dessous mon code:

Ma page php - ou mon tableau s'affiche:

<form id="Form_FundAccounts" name="Form_FundAccounts">
	<fieldset>
	<legend>Bank Accounts Details</legend>
	<br/>
	<label id="Label_AccountNumber" for="AccountNumber">Account Number</label>
	<input type="text" name="AccountNumber" id="AccountNumber" size="40" tabindex="1"/>
	<label id="Label_AccountCurrency" for="AccountCurrency">Currency</label>
	<select type="text" name="Select_AccountCurrency" id="Select_AccountCurrency">
		<?php
		$db = mysql_connect("localhost", "root", "") or die('Erreur de connexion '.mysql_error());
		mysql_select_db("mydatabase",$db) or die('Erreur de selection '.mysql_error()); 
		$sql = 'SELECT Currency FROM currencies ORDER BY Currency';
		$query = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
		while($data = mysql_fetch_assoc($query)) 
		{echo "<option>".$data["Currency"]."</option>\n";} 
		mysql_close();
		?>
	<input type="button" id="Button_SaveNewAccount" value="Add New" onClick="AddElement();"/>
	<input type="button" id="Button_DeleteNewAccount" value="Delete" onClick="DeleteElement();"/>
	</br>
	<table id="Table">
	<tr>
	<td id="AccountNb">Account Number</td>
	<td id="Ccy">Currency</td>
	<td id="Delete" ></td> 
	</tr>
	</table>
	</fieldset>
</form>

Mon code Javascript d'ajout/suppression dynamique des lignes - le probleme est a la ligne 40:

<!--
function AddElement()
{
var AccountNb = document.getElementById("AccountNumber").value;
var Ccy = document.getElementById("Select_AccountCurrency").options[document.getElementById("Select_AccountCurrency").selectedIndex].text

var newRow = document.getElementById('Table').insertRow(-1);
newRow.style.backgroundColor = ['#FFF' /* Pair */, '#EEEFF9' /* Impair */][document.getElementById('Table').getElementsByTagName('tr').length%2];
var newCell = newRow.insertCell(0);
newCell.innerHTML = AccountNb;
newCell = newRow.insertCell(1);
newCell.innerHTML = Ccy;
newCell = newRow.insertCell(2);
var checkbox = document.createElement('input');
checkbox.setAttribute('type', 'checkbox');
newCell.appendChild (checkbox);
}

function DeleteElement() 
{   
try
{   
var table = document.getElementById('Table');   
var rowCount = table.rows.length;

for(var i=1; i<rowCount; i++)
{          
var row = table.rows[i];
var chkbox = row.cells[2].childNodes[0];
if(null != chkbox && true == chkbox.checked)
{   
table.deleteRow(i);
rowCount--;   
i--;   
}
   
  
}
}
row.style.backgroundColor = ['#FFF' /* Pair */, '#EEEFF9' /* Impair */][document.getElementById('Table').getElementsByTagName('tr').length%2];

catch(e)
{   
alert(e);   
}   
}   

//-->

17 avril 2009 à 11:12:27

Quelqu'un pourrait-il m'aider svp ?

17 avril 2009 à 11:17:41

Bah tu relances la fonction depuis le début -.-

17 avril 2009 à 12:15:38

C'est ce que j'essaie de faire mais je ne sais pas ou la placer dans mon code.
Je l'ai sortie de la boucle mais cela ne fonctionne pas bien.

Faudrait-il l'inclure ligne 47 ?

17 avril 2009 à 12:56:55

function couleurs()
{
var lignes=document.getElementById('Tableau').getElementsByTagName('tr');
for(var i=0,l=lignes.length;i<l;i++)
{
lignes[i].style.backgroundColor = ['#FFF' /* Pair */, '#EEEFF9' /* Impair */][i%2];
}
}

25 avril 2009 à 1:38:39

Merci pour votre aide. Ca fonctionne tres bien :-)

Alterner la couleur des lignes

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.