Discussion :

[HeB91]

Bonsoir a tous,

Voici mon probleme sur lequel je planche depuis 2h..!!!

je génère un tr avec javascript :

Code :

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

var tr = "<tr class='vossers-filterrow'>" + tdset + "</tr>";

que j'insere apres un autre tr.
Sous opera, firefox, j'arrive a le récupérer ainsi:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
function MaskFilter()
{
    var list_tr = document.getElementsByTagName('tr');
    for(var i=0; i<list_tr.length; i++)
    {
      if(list_tr[i].className == "vossers-filterrow")
           list_tr[i].style.display="none";
    }
}

seulement sur IE ca ne fonctionne pas..j'ai essayé de mettre un id lors de la génération, ie me dit que le getElementById est null..
dans les 2 cas, je n'arrive meme pas a voir l'élément avec iedevtoolbar..
help plzzz

[E.Bzz]

Bonjour,

je génère un tr avec javascript :

Code :

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

var tr = "<tr class='vossers-filterrow'>" + tdset + "</tr>";

que j'insere apres un autre tr.

On peut voir les autres étapes ?
=> le contenu de tdset et les instruction d' "insertion"

En fait la fonction complète serait souhaitable

A+

[HeB91]

voila le script utilisé que j'éssai de décortiquer

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
// SharePoint InstantListFilter - developed by Jaap Vossers
 
$(document).ready(function()
{	
	jQuery.extend(jQuery.expr[':'], {
	  containsIgnoreCase: "(a.textContent||a.innerText||jQuery(a).text()||'').toLowerCase().indexOf((m[3]||'').toLowerCase())>=0"
	});
 
 
	$("table.ms-listviewtable tr.ms-viewheadertr").each(function()
	{
		if($("td.ms-vh-group", this).size() > 0)
		{
			return;	
		}
 
		var tdset = "";
 
		var colIndex = 0;
 
		$(this).children("th,td").each(function()
		{
			if($(this).hasClass("ms-vh-icon"))
			{
				// attachment
				tdset += "<td></td>";
			}
			else
			{
				// filterable
				tdset += "<td><input type='text' class='vossers-filterfield' filtercolindex='" + colIndex + "' /></td>";				
			}
 
			colIndex++;
		});
		var tr = "<tr class='vossers-filterrow'>" + tdset + "</tr>";
		$(tr).insertAfter(this);
//        var list_tr = document.getElementsByTagName('tr');
//        for(var i=0; i<list_tr.length; i++)
//        {
//          if(list_tr[i].className == "ms-viewheadertr")
//               list_tr[i].parentElement.insertBefore(tr,list_tr[i].nextSibling);
//        }
 
	});	
 
 
	$("input.vossers-filterfield")
		.css("border", "1px solid #7f9db9")
		.css("width", "100%")
		.css("margin", "2px")
		.css("padding", "2px")
		.keyup(function()
		{			
			var inputClosure = this;
 
			if(window.VossersFilterTimeoutHandle)
			{
				clearTimeout(window.VossersFilterTimeoutHandle);
			}
 
			window.VossersFilterTimeoutHandle = setTimeout(function()
			{
				var filterValues = new Array();
 
				$("input.vossers-filterfield", $(inputClosure).parents("tr:first")).each(function()
				{				
					if($(this).val() != "")				
					{
						filterValues[$(this).attr("filtercolindex")] = $(this).val();
					}
				});		
 
 
				$(inputClosure).parents("tr.vossers-filterrow").nextAll("tr").each(function()
				{
					var mismatch = false;
 
					$(this).children("td").each(function(colIndex)
					{
						if(mismatch) return;
 
						if(filterValues[colIndex])
						{
							var val = filterValues[colIndex];
 
							// replace double quote character with 2 instances of itself
							val = val.replace(/"/g, String.fromCharCode(34) + String.fromCharCode(34));							
 
							if($(this).is(":not(:containsIgnoreCase('" + val + "'))"))
							{
								mismatch = true;
							}						
						}
					});
 
					if(mismatch)
					{
						$(this).hide();
					}
					else
					{
						$(this).show();
					}		
				});				
 
			}, 250);
		});
});

[SpaceFrog]

Personnellement je m'entête à passer par le DOM pour crée des éléments sur une page ...
ça m'évite juste ce genre de déconvenues
http://www.developpez.net/forums/d47...us-rapidement/

[HeB91]

Effectivement, j'ai déjà essayer d'une maniere similaire avec ce code :

Code :

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

1
2
3
4
5
6
var list_tr = document.getElementsByTagName('tr');
        for(var i=0; i<list_tr.length; i++)
        {
          if(list_tr[i].className == "ms-viewheadertr")
               list_tr[i].parentElement.insertBefore(tr,list_tr[i].nextSibling);
        }

Mais je vais rééssayer en suivant ta méthode, c-a-d en créant les éléments tr et td étant donné que le tableau éxiste déjà. Tu pense que cela résoudrais mon probleme?

[SpaceFrog]

tu précises le tbody ?

[HeB91]

comment ça? le tbody existe déjà.

Je suis un peu perdu, j'ai tenté quelque chose mais sans résultat, je ne vois toujours pas la ligne dans iedevtoolbar et le code ne doit pas etre bon car je n'ais pas de le résultat attendu..

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
// Création des éléments de la ligne de filtre
		var tr=document.createElement('tr');
		var td_empty=document.createElement('td');
		var td_full=document.createElement('td');
		var td_input=document.createElement('input');
		td_input.setAttribute('type','text');
		td_input.setAttribute('class','vossers-filterfield');
		td_input.setAttribute('filtercolindex','vossers-filterfield');
		td_full.appendChild(td_input);
 
		var colIndex = 0;
 
		$(this).children("th,td").each(function()
		{
			if($(this).hasClass("ms-vh-icon"))
			{
				// attachment
				//tdset += "<td></td>";
				tr.appendChild(td_empty);
			}
			else
			{
				// filterable
				//tdset += "<td><input type='text' class='vossers-filterfield' filtercolindex='" + colIndex + "' /></td>";				
				td_input.setAttribute('filtercolindex',colIndex);
				td_full.replaceChild(td_input,td_input);
				tr.appendChild(td_full);
			}
			colIndex++;
		});
		//var tr = "<tr class='vossers-filterrow'>" + tdset + "</tr>";
 
 
 
		// Insertion DOM
		// On récupere la premiere ligne de la liste (le header)
		var list_tr = document.getElementsByTagName('tr');
        for(var i=0; i<list_tr.length; i++)
        {
          if(list_tr[i].className == "ms-viewheadertr")
               list_tr[i].parentElement.insertBefore(tr,list_tr[i].nextSibling);
        }
		//$(tr).insertAfter(this);
 
 
	});

[SpaceFrog]

il faut appender un tr dans le tbody

[HeB91]

Code :

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

list_tr[i].parentElement.insertBefore(tr,list_tr[i].nextSibling);

Le parentElement est le tbody

EDIT : faut-il spécifier à la nouvelle ligne

Code :

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

display: table-row

comme propriété css?

[SpaceFrog]

mmmh du coup je me demande sur quoi pointe le nextSibling ...
il faut se mefier du nextSibling, l'interprétation des nodes etant differentre d'un browser à l'autre

[HeB91]

Bon, mon réel probleme était de n'éxécuter ce script que dans une seule page.
Car c'est une features que j'ai déployé et qui s'applique à toutes les pages..
J'ai réglé mon probleme autrement et d'ailleur c'était la meilleure façon je pense (au lieu de récupérer la ligne inséré et de l'a cacher sur les pages dont je ne voulais pas m'en servir). J'ai juste laissé dans le head de la masterpage l'appel au script jquery et j'ai créer un editeur de contenu sur la page pour insérer la ligne avec le code javascript.
Merci de tes réponses!