supprimer des lignes d'un tableau HTML

**spax** · 22/09/2008, 16h26

Bonjour ,

Voila la situation :
J'affiche sur une page PHP quelques données stocker dans une base de données SQL . ( tout ce passe bien ) sachant que l'affichage se fait dans un simple tableau HTML .

Je veut ajouter une option pour n'afficher que les données apartenant a une certaine familles :
exemple : si j'affiche les liste de tous les postes d'un reseau ( OS : linux , win , solaris ... ) je veut maintenant n'afficher que ceux avec un OS linux par exemple et la sachant que je m'y conné pas trop en JS :

- jarrive a filtrer et a colorer les ligne du tableau selon mon critère mais je cherche plutot a supprimer ceux que je veut pas de l'affichage .

donc est ce faisable déja ? si oui comment le faire ? merci

voila mon code actuel .

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
function OSFilter()
{
	var tab = document.getElementsByTagName('td');
	var temp="";
	var td = new Array();
	var k=0;
	var modele = /os/i;
	for(var i=0;i<tab.length;i++)
	{
		if(modele.test(tab[i].id) )
		td[k++] = tab[i].id;
	}
 
	for(var i=0;i<td.length;i++)
	{
	temp = td[i];
	temp = temp.replace("os","ligne");
	document.getElementById(temp).style.backgroundColor= "white";
		var value = document.getElementById("os").value;
		if(document.getElementById(td[i]).innerHTML.valueOf().search(value) !=-1)
		{
			document.getElementById(temp).style.backgroundColor= "red";
		}
		else
		{
			document.getElementById(temp).style.backgroundColor= "green";
 
 
		}
	}
}

et l'appel se fait dans un script php :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<label>Clients Operation System </label>
	<select id="os" name="OperatingSystem" onchange="OSFilter()">
	<option value="All">All OS\'s</option>
	{
		echo "<option value="Windows">Windows OS clients</option>";
		echo "<option value="SunOS">SunOS OS clients</option>";
		echo "<option value="Linux">Linux OS clients</option>";
	}
	</select>

**le_chomeur** · 22/09/2008, 19h19

aurais tu le code html de ton tableau ? ^^

**spax** · 23/09/2008, 09h27

Bonjour ,
voici la partie HTML ou plutot php qui crée le tableau :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
function printFeature($server, $name)
{
	#echo "<p>$server $name</p>";
	$rep = request("SELECT * FROM $name WHERE	server='$server' ORDER BY timestamp DESC");
	$field = request("DESCRIBE $name");
	$i=0;
	while($data = mysql_fetch_array($field))
	{
		$tab[$i] = $data[0];
		$i++;
	}
	$data=mysql_fetch_array(request("SELECT comment FROM descriptionfeatures WHERE name='$name'"));
	echo " $data[0]</p>";
	echo "<p id='$server$name'><table class=\"dTable\" border=1><tr>";
	for($i=0;$i<count($tab);$i++)
	{
		echo "<th><table><tr><td>$tab[$i] </td><td>
			<input type='button' onClick=\"tri('$server$name','$server','$name','$tab[$i]','ASC')\" value='∧' /></td><td>
		<input type='button' onClick=\"tri('$server$name','$server','$name','$tab[$i]','DESC')\" value='∨' /></td></tr></table>
		</th>";
	}
	echo "</tr>";
	$k=0;
	while($data = mysql_fetch_array($rep))
	{
		echo "<tr id=".$server.$name."ligne".$k.">";
		for($i=0;$i<count($tab);$i++)
		{
			echo "<td";
			if($name == "oploglist" && $tab[$i] == "diff")
			echo " id='".$server.$name."diff".$k++."' ";
			//added
			if($name == "clientslist" && $tab[$i] == "os")
			echo " id='".$server.$name."os".$k++."' ";
			//end added 
			echo ">";
			if($tab[$i] == "timestamp")
			echo toDate($data[$i]);
			else
			echo $data[$i];
			echo "</td>";
		}
		echo "</tr>";
	}
	echo "</table></p>";
}

**le_chomeur** · 23/09/2008, 09h38

oui mais j'ai un peu la flemme d'analyser le code qu'il va générer !
j'aimerais bien le code HTML qui en ressort

**spax** · 23/09/2008, 09h48

Euh j'ai pas tout suivi mais en regardant la source de la page afficher j'ai quelque chose dans le genre .

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<label>Clients Operation System </label>
	<select id="os" name="OperatingSystem" onchange="OSFilter()">
	<option value="All">All OS's</option>
 
	{
		echo "<option value="Windows">Windows OS clients</option>";
		echo "<option value="SunOS">SunOS OS clients</option>";
		echo "<option value="Linux">Linux OS clients</option>";
	}
	</select>
 
	<input type="button" onClick="OSFilter()" value="Go !" >
 
	<p>diva :  list of all clients</p><p id='divaclientslist'><table class="dTable" border=1><tr><th><table><tr><td>name </td><td>
 
			<input type='button' onClick="tri('divaclientslist','diva','clientslist','name','ASC')" value='∧' /></td><td>
		<input type='button' onClick="tri('divaclientslist','diva','clientslist','name','DESC')" value='∨' /></td></tr></table>
		</th><th><table><tr><td>server </td><td>
			<input type='button' onClick="tri('divaclientslist','diva','clientslist','server','ASC')" value='∧' /></td><td>
		<input type='button' onClick="tri('divaclientslist','diva','clientslist','server','DESC')" value='∨' /></td></tr></table>
		</th><th><table><tr><td>version </td><td>
			<input type='button' onClick="tri('divaclientslist','diva','clientslist','version','ASC')" value='∧' /></td><td>
		<input type='button' onClick="tri('divaclientslist','diva','clientslist','version','DESC')" value='∨' /></td></tr></table>
 
		</th><th><table><tr><td>os </td><td>
			<input type='button' onClick="tri('divaclientslist','diva','clientslist','os','ASC')" value='∧' /></td><td>
		<input type='button' onClick="tri('divaclientslist','diva','clientslist','os','DESC')" value='∨' /></td></tr></table>
		</th><th><table><tr><td>timestamp </td><td>
			<input type='button' onClick="tri('divaclientslist','diva','clientslist','timestamp','ASC')" value='∧' /></td><td>
		<input type='button' onClick="tri('divaclientslist','diva','clientslist','timestamp','DESC')" value='∨' /></td></tr></table>
		</th></tr><tr id=divaclientslistligne0><td>ai</td><td>diva</td><td>ClearCase 2002.05.00+ </td><td id='divaclientslistos0' >SunOS 5.8 Generic_117350-46 sun4u</td><td>22/09/08 - 10:24:30</td></tr><tr id=divaclientslistligne1><td>lek</td><td>diva</td><td>ClearCase 2002.05.00+ </td><td id='divaclientslistos1' >SunOS 5.8 Generic_117350-43 sun4u</td><td>22/09/08 - 10:24:30</td></tr><tr id=divaclientslistligne2><td>van</td><td>diva</td><td>ClearCase 2003.06.10+ </td><td id='divaclientslistos2' >SunOS 5.8 Generic_117350-43 sun4u</td><td>22/09/08 - 10:24:30</td></tr><tr id=divaclientslistligne3><td>acdc</td><td>diva</td><td>ClearCase 2002.05.00+ </td><td id='divaclientslistos3' >SunOS 5.8 Generic_117350-43 sun4u</td><td>22/09/08 - 10:24:30</td></tr><tr id=divaclientslistligne4><td>ange</td><td>diva</td><td>ClearCase 2002.05.00+ </td><td id='divaclientslistos4' >SunOS 5.8 Generic_117350-43 sun4u</td><td>22/09/08 - 10:24:30</td></tr><tr id=divaclientslistligne5><td>diva</td><td>diva</td><td>ClearCase 7.0.1.0-IFIX01 </td><td id='divaclientslistos5' >SunOS 5.8 Generic_117350-43 sun4u</td><td>22/09/08 - 10:24:30</td></tr><tr id=divaclientslistligne6><td>ines</td><td>diva</td><td>ClearCase 2002.05.00+ </td><td id='divaclientslistos6' >SunOS 5.8 Generic_117350-43 sun4u</td><td>22/09/08 - 10:24:30</td></tr><tr id=divaclientslistligne7><td>kite</td><td>diva</td><td>ClearCase 2002.05.00+ </td><td id='divaclientslistos7' >SunOS 5.8 Generic_117350-43 sun4u</td><td>22/09/08 - 10:24:30</td></tr><tr id=divaclientslistligne8><td>vlan</td><td>diva</td><td>ClearCase 2003.06.10+ </td><td id='divaclientslistos8' >SunOS 5.8 Generic_117350-43 sun4u</td><td>22/09/08 - 10:24:30</td></tr><tr id=divaclientslistligne9><td>vsop</td><td>diva</td><td>ClearCase 7.0.1.1-IFIX01 </td><td id='divaclientslistos9' >SunOS 5.8 Generic_117350-54 sun4u</td><td>22/09/08 - 10:24:30</td></tr><tr id=divaclientslistligne10><td>acrux</td><td>diva</td><td>ClearCase 2003.06.10+ </td><td id='divaclientslistos10' >SunOS 5.8 Generic_117350-43 sun4u</td><td>22/09/08 - 10:24:30</td></tr><tr id=divaclientslistligne11><td>alcor</td><td>diva</td><td>ClearCase 2002.05.00+ </td><td id='divaclientslistos11' >SunOS 5.8 Generic_117350-43 sun4u</td><td>22/09/08 - 10:24:30</td></tr><tr id=divaclientslistligne12><td>dione</td><td>diva</td><td>ClearCase 2003.06.10+ </td><td id='divaclientslistos12' >SunOS 5.8 Generic_117350-43 sun4u</td><td>22/09/08 - 10:24:30</td></tr><tr 
.
.
.
.
id=divaclientslistligne283><td>frillv1f07240</td><td>diva</td><td>ClearCase 7.0.1.1 </td><td id='divaclientslistos283' >Linux 2.6.9-55.ELsmp #1 SMP Fri Apr 20 17:03:35 EDT 2007 i686</td><td>22/09/08 - 10:24:30</td></tr><tr id=divaclientslistligne284><td>frillv1f07271</td><td>diva</td><td>ClearCase 7.0.1.1 </td><td id='divaclientslistos284' >Linux 2.6.9-55.ELsmp #1 SMP Fri Apr 20 17:03:35 EDT 2007 i686</td><td>22/09/08 - 10:24:30</td></tr></table></p>	<script type="text/javascript">
	color();
	</script>
 
	</td></tr></table>
	</body>
	</html>

j'éspère que c'est ca :s

les lignes sont trop long au cas ou

**le_chomeur** · 23/09/2008, 10h16

oui c'est bien ça

tu as un problème du coté php déja :

Code :

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

1
2
3
4
5
6
 
{
		echo "<option value="Windows">Windows OS clients</option>";
		echo "<option value="SunOS">SunOS OS clients</option>";
		echo "<option value="Linux">Linux OS clients</option>";
	}

tes écho ne sont pas interprèté ...

sinon pour ton problème de suppression de ligne de tableau je t'invite a aller regarder cet exemple :

http://www.developpez.net/forums/d33...ligne-tableau/

**spax** · 23/09/2008, 10h19

Bizard sachant que la forme est bien afficher même si le code php n'est pas intérprété :s.
je vais regarder ca .

**spax** · 23/09/2008, 12h00

Le prob des echo a été reglé :

quelle idée de metre un echo dans un autre :s

**spax** · 24/09/2008, 12h43

Encore moi ,
bien je suis arrivé plus au moin a supprimer des ligne et je me rend compte la que en effet ce que je veut c'est plutot ne pas les afficher ( les masquer ) et non pas les supprimer ( pour réutilisé le contenu et ne pas le perdre :s )

comme suite :
Au debut j'ai tout les OS affichés .
je selectionne windows : je ne vois sur la page que du windows
je selectionne linux je vois que linux sans avoir a contacter la base de donnée et tout recharger .

c'est possible avec du JS ? merci

**le_chomeur** · 24/09/2008, 12h57

oui , montre moi le code GENERE et non pas php , jusqu'au moment ou tu supprimes , je te le remplacerais par une fonction masquer

**spax** · 24/09/2008, 13h51

Bien la fonction c'est en Javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
 
function OSFilter()
{
	var tab = document.getElementsByTagName('td');
	var temp="";
	var td = new Array();
	var k=0;
	var modele = /os/i;
	for(var i=0;i<tab.length;i++)
	{
		if(modele.test(tab[i].id) )
		td[k++] = tab[i].id;
	}
 
	for(var i=0;i<td.length;i++)
	{
	temp = td[i];
	temp = temp.replace("os","ligne");
	document.getElementById(temp).style.backgroundColor= "white";
		var value = document.getElementById("os").value;
		if(document.getElementById(td[i]).innerHTML.valueOf().search(value) !=-1)
		{
			document.getElementById('tabID').deleteRow(i/5);
 
		}
		else
		{
			//document.getElementById('temp').deleteRow(i);
			document.getElementById(temp).style.backgroundColor= "green";
 
 
 
		}
	}
}

je voulais savoir si a la place de deleteRow() il y'a une fonction qui masque la ligne et non pas la supprime .
sinon que puis-je faire ds ce sens ?

Merci

**spax** · 24/09/2008, 14h04

Trouvé !!
j'ai du remplaçer juste un bout de code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
if(document.getElementById(td[i]).innerHTML.valueOf().search(value) !=-1)
		{
			document.getElementById(temp).style.display = "";
			document.getElementById(temp).style.backgroundColor= "red";
		}
		else
		{
			document.getElementById(temp).style.display = "none";
			document.getElementById(temp).style.backgroundColor= "green";
 
 
 
		}

par contre quelqu'un serait ou on a une liste detailler des fonctions javascript ? enfin un truc dans le genre de Java avec pakage -> fct ....

**spax** · 24/09/2008, 16h15

Une derniere pour la route ( pour l'instant )

j'ai un soucis au niveau de cet instruction :

Code :

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

1
2
 
if(document.getElementById(td[i]).innerHTML.valueOf().search(value) !=-1)

elle marche bein sauf quand j'ai value avec des chose dans le genre + - ...

style quand je veut comparer : prog version 0.1+ la ca bug il le trouve pas même si il y est .

une solution ?

**spax** · 24/09/2008, 16h19

je pense que ca vient du fait que search() est case sensitive ? en tous cas pourquoi faire compliquer j'avait besoin de == dans ce cas

reglé aussi

supprimer des lignes d'un tableau HTML

JavaScript

Discussions similaires

Partager

Partager