Forum : Coloration de cellule d'un tableau

amethyste

Réponse acceptée

Cadeau, juste à vérifier que la fonction clean retourne bien quelque chose.

amethyste

Réponse acceptée

J'ai mis à jour : http://codepen.io/amethyste/pen/wBrJwq

Amstramgram

Le tableau est dans un article unique ou il revient dans plusieurs articles ? Directement dans le WYSIWYG de l'admin ou sur la partie front?

amethyste

Sur wordpress, ce sera avec javascript obligé

François Cammas

Tu peux inclure deux classes dans ton css et le faire en javascript!

Amneziik59

Auteur

Le tableau revient dans chaque article car Il est situé dans le fichier functions.php
Il est également dispo depuis l'éditeur WYSIWYG lors de l'édition de l'article

Je me doute qu'il fasse passer par le JS mais je n'ai pas vraimeNt de notions dans ce langage.

Si quelqu'un pouvait me donner un petit exemple de script ce serait vraiment sympa !

François Cammas

Le mieux serait que tu te formes un petit peu. Je fais essayer de te donner envie et de t'aider en meme temps. :
En jquery :

$(function(){
    $('.mestableaux tr').each(function(){
        var $ligne = $(this);
        var $cell = $ligne.find('td');
        var $call1 = $cell[0];
        var $cell2 = $cell[1];

        if($cell1.val() > $cell2.val()){
            $cell2.css('background','#F00');
        }
        else{
            $cell2.css('background','#0F0');
        }
    });
});

J'ai evidement pas tester mais ça doit ressembler à un truc comme ça, de toute de façon avec un peu d'anglais et les connaissances en html, tu comprends ce que je fais !

Amneziik59

Auteur

Merci de ta réponse !

J'ai quelque notions, je comprends à peu près le code mais suis incapable de le faire de moi-même en fait.

Donc la, à la lecture de ton script, il suffit que je modifie l'attribut "mestableaux" par le name HTML du tableau en question et que je mette autant de cellX que j'ai besoin.
Puis de faire le comparatif grâce à la structure if/else.
Si la condition est vraie, on colore en vert sinon on colore en rouge.

Cependant deux questions persistent.
1/ Est-ce que le script va parcourir toutes les lignes du tableau ou seulement la première ?
2/ Est-ce que si la cellule "Default" (celle qui va servir à comparer les autres donc) contient des symboles style le "%", ca va fonctionner ? Ou bien est-ce qu'il faut uniquement un INT ?

Merci beaucoup pour ton aide, je vais essayer d'adapter ça et fait un retour dans la foulée pour dire si ca fonctionne ou pas.

Cordialement,

Amneziik59

Auteur

Ca ne fonctionne visiblement pas après plusieurs tests.
Je vais essayer de donner un peu plus d'infos pour la suite.

Voici un tableau sur lequel l'effet doit etre pris en compte :

<table id="tabMilieu">
    <tbody>
        <tr>
            <td class="titre" colspan="11"><center><strong>Indicateur Levée du Jour</strong></center></td>
        </tr>
        <tr>
            <td colspan="2"></td>
            <td colspan="1" width="400"></td>
            <td width="90">Obj</td>
            <td width="70">V</td>
            <td width="70">S</td>
            <td width="70">D</td>
            <td width="70">L</td>
            <td width="70">M</td>
            <td width="70">M</td>
            <td width="70">J</td>
        </tr>
    <tr>
        <td rowspan="4" width="84">LKT1</td>
        <td colspan="2" width="400">OEE</td>
        <td>61.7%</td>
        <td></td>
                <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
                <td colspan="2" width="400">Temps de panne</td>
                <td>1h10</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
      </tr>
</tbody>
</table>

Ce n'est qu'un extrait mais bon, le principe est la.
La colonne "Obj", c'est la fameuse colonne qui sert d'indice pour pouvoir comparer les autres cellules du tableau.
Donc en gros, on se sert de la cellule contenant le 61,7% pour faire le test des autres cellules.

Côté Jquery, voici le code que j'avais adapté pour faire le test :

$(function(){
    $('.tabMilieu tr').each(function(){
        var $ligne = $(this);
        var $cell = $ligne.find('td');
        var $cellDefault = $cell[3];
        var $cell4 = $cell[4];

        if($cellDefault.val() > $cell4.val()){
            $cell4.css('background','#339900');
        }
        else{
            $cell4.css('background','#FF0000');
        }
    });
});

Merci de votre aide

François Cammas

J'avais pas tout compris a ton probleme

le code va plutot ressembler a ceci :

$(function(){
    var $cellRef = $('.tabMilieu tr:nth-child(3) td:nth-child(3)');
    var valeurRef = $cellRef.val();
    var valeurRef.replace('%','');
    $('.tabMilieu tr:nth-child(n+4)').each(function(){
        var $ligne = $(this);
        var $cell = $ligne.find('td');
        var $cellComp = $cell[n]; // remplace n par le bonne indice pour retrouver ta valeur a comparer
        var valComp = $cellComp.val();
        // Mettre un traitement ici si valComp n'est pas Int
        //*
        var $cellTarget = $cell[o]; // remplace o par l'indice de la case à colorier

        if(valeurRef > valComp){
            $cell4.css('background','#339900');
        }
        else{
            $cell4.css('background','#FF0000');
        }
    });
});

Bon courage !

Amneziik59

Auteur

Bonjour François,

Merci pour ton aide, mais malheureusement je bloque encore.
Comme on dit, un dessin vaut mieux qu'un grand discours.
Donc je vais tenter d'être encore plus claire comme ça.

Voici le fameux tableau.

Comme tu peux le voir, c'est la colonne "Obj" qui sert de colonne directrice.
Puis les colonnes allant de "V" à "J" sont remplies au fur et a mesure.
Il faudrait pouvoir comparer chaque celulle de ces colonnes à la valeur contenues dans "Obj".

Si Obj est supérieur => On colorie en Vert
Si Obj est inférieur => On colorie en Rouge

Il faudrait pouvoir faire ca sur chaque ligne (OEE, Temps de Panne, Cadence et Quantité rebuts) et sur toutes les colonnes (de V à J)

J'espère avoir été plus claire.

Merci encore pour ton aide,
Cordialement,

Amstramgram

Mon algorithmique laisse à désirer mais ma logique est assez bonne en général, du coup ca donne ca.

Bon par contre je ne sais pas pourquoi il y a une erreur a la ligne "Cadence".


(function($){

    var aRef = []; // création d'un tableau

// selection des valeurs avec la class default-value
    $('table tr .default-value').each(function(){ 
        var valeurRef = $(this).text();
        valeurRef = valeurRef.replace('h', '').replace('%', ''); // parse des valeurs

        aRef.push(valeurRef); // ajout d'un valeur de reference
    });

    var colCount = 10; // nombre de colonne
    var rowCount = $('table tr').length; // nombre de ligne

// on parcours toutes les lignes
    for(var r = 2; r<rowCount+1; r++){

        var current = 'table tr:nth-child('+r+')'; // ligne courante

// on parcours toutes les colonnes
        for(var c = 3; c<colCount; c++){
            var currentcell = $(current+' td:nth-child('+c+')'); // on croise les deux (ligne et colonne) pour sélectionner une cellule
            var valCur = currentcell.text(); // on recupere la valeur de la cellule

            if(valCur != ''){ // on check si elle n'est pas vide
                valCur = valCur.replace('h', '').replace('%', ''); // parse la valeur

                if(aRef[r-2] > valCur){
                    currentcell.css({'background-color':'#EF4836'});
                }
                else{
                    currentcell.css({'background-color':'#2ECC71'});
                }
            } // end if
        }// end for col

    }// end for row

})(jQuery);

Ca donne le résultat que tu veux mais je pense qu'il y a deux trois personnes sur le forum qui peuvent l'améliorer.

François Cammas

Désolé j'ai rien compris a ce que fait Amstramgram

Je vais essayer de commenter en meme temps pour expliquer ce que je fais

$(function(){
    $('.tabMilieu tr:nth-child(n+3)').each(function(){ // A partir de la ligne 3, faire pour chaque ligne
        var $ligne = $(this);
        var $cell = $ligne.find('td');
        var $cellObj = $cell[1]; // Les tableaux en js commence par 0 donc je prend la deuxieme cellule de la ligne
        var valObj = $cellObj.val().replace('h', '').replace('%', ''); // Je stocke sa valeur "convertie" en INT

        // Je lance mes comparaisons
        $ligne.find('td:nth-child(n+3)').each(function(){ // Pour chaque cellule à partir de la 3e
            var $cellCurrent = $(this);
            var valCurrent = $cellCurrent.val().replace('h', '').replace('%', '');// Je stocke sa valeur "convertie" en INT

            if(valCurrent !=0){
                if(ValCurrent < valObj){ // Si valObj est supérieur
                    $cellCurrent.css('background','#339900'); // Je colorise en vert
                }
                else{ // Sinon
                    $cellCurrent.css('background','#FF0000'); // je colorise en rouge
                }
            }
        });// fin parcours td
      });// fin parcours tr
});

Aller faut que ça marche. Sinon mets en lien un tableau complet pour tester.

François Cammas

Je viens de tester, ça passe pas, c'est compliqué avec ta structure de tableau, est ce que tu peux mettre des classes a tes cellules ??? type valOb / valComp

Amneziik59

Auteur

Bonjour à vous deux,

Enorme merci pour le temps que vous passez à essayer de m'aider.

@François : Je n'ai pas très bien compris ce que tu entendais par " Mets en lien un tableau complet pour tester "
Donc j'ai fais ça : http://jsfiddle.net/nxj4kynh/5/
Je ne sais pas si ca vous aidera, mais le tableau est complet, e tpour tester ca ira peut-être mieux.

Merci encore !

Amstramgram

Tu peux rajouter des class dans ton tableau parce que du coup j'ai fais ca. Bon je ne comprend toujours pas pourquoi la ligne "Cadence" bug.
http://jsfiddle.net/evvr73o0/13/

Amneziik59

Auteur

Merci pour ton retour Amstramgram,
cependant quelques petits soucis persistent après test du lien JSFiddle.

Il faut, que si la valeur Obj est supérieur a celle des autres colonnes (de V à J) alors on colore les cellules (de V à J) en Vert.
Si Obj est inférieur aux valeurs des autres colonnes, on colore en Vert.

Or dans ton exemple, ca colore toujours en vert, qu'importe la valeur

Merci encore de l'aide fournie !

Amstramgram

Dans l'exemple que j'ai fournis ca fais ca :
http://jsfiddle.net/evvr73o0/13/embedded/result/

Amneziik59

Auteur

Le "8" dans "Cadence" n'est pas logique comparé aux autres valeurs :s
Sinon cela me semble correct à la vue de ton dernier lien. Le seul petit bémol, c'est que c'est l'inverse.

Si Obj est supérieur => Vert
Si Obj est inférieur => Rouge

En fait, je serais tenté de dire que la ligne "Cadence" pose effectivement problème.
Si par exemple, dans la cellule "Cadence - V " je tape "2", il me le met en Rouge au lieu de VErt (j'ai inversé les couleurs par rapport à ton code)
Mais, si je tape "1", alors il me le met correctement en Vert.
Si je tape "3", il me le met en rouge..

Merci de ton aide,
La fin est proche :$

François Cammas

Vas-y teste ça : http://jsfiddle.net/nxj4kynh/8/

J'ai juste mis des classes "valeur" a tes valeurs objectives.
et attention ID => unique, Class => unique ou plusieurs

Amstramgram

@Amneziik59 si tu lis le message "la ligne "Cadence" bug." Bon au final j'ai trouvé pourquoi la valeur n'etait pas concidérée comme un Int...

http://jsfiddle.net/evvr73o0/31/

@FrançoisCammas tu devrais changer ca => if(valCurrent !=0) ligne 11 si tu mets un 0 comme valeur dans le tableau il n'y pas le background qui s'affiche. ;)

François Cammas

@Amstramgram, merci pour la comparaison j'ai mis a jour => http://jsfiddle.net/nxj4kynh/8/. Par contre mettre "j'ai trouvé" alors que je mets un post avec un parseInt pour permettre la comparaison entre valeurs, cela m'a fait marrer.

Amstramgram

Est ce que tu m'as donné la solution pour le parseInt, je ne crois pas. J'ai cherché pendant un moment pour comprendre pourquoi le 10 n'etait pas pris en compte. Aprés j'ai regardé ton code pour voir ce que tu fesais. J'ai vue effectivement que tu faisais un parseInt, j'ai testé et effectivement c'etait ca. Du coup, oui j'ai trouvé et je mets bien trouvé parceque j'ai cherché et essayé de comprendre ce que tu faisais.
Mais bon si tu veux "François Cammas à trouvé la solution." Peu m'importe. :)

Amneziik59

Auteur

Bonjour à vous,

Merci encore pour l'aide fournis.
Sur JSFiddle, le code marche sans problèmes !

Cependant, j'ai tout de même une erreur.
Comme dit au départ, le code est destiné à être utilisé sur WordPress.

Et je rencontre une erreur.
Ci joint le lien JSFiddle avec l'intégralité d'un article type : http://jsfiddle.net/evvr73o0/40/

L'erreur est la suivante :
Aucune coloration, peut importe les données entrées.
J'ai fais des tests avec un :
alert('salut'); pour pouvoir situé le problème, et j'e nsuis arrivé à la conclusion suivante :

(function($){

    var aRef = [];
    var colCount = $('table tbody tr:nth-child(1) td').length + 1;
    var rowCount = $('table tbody tr').length + 1;

    alert('salut'); // Fonctionne comme il faut

    $('table tbody tr .default-value').each(function(){

    alert('salut'); // Ne fonctionne pas !

        var valeurRef = $(this).text().replace('h', '').replace('%', '');
        aRef.push(valeurRef);

    });

    for(var r = 2; r<rowCount; r++){

    alert('salut'); // Ne fonctionne pas !

        var current = 'table tbody tr:nth-child('+r+')';

        for(var c = 3; c<colCount; c++){
            var currentcell = $(current+' td:nth-child('+c+')');
            var valCur = currentcell.text().replace('h', '').replace('%', '');
            valCur = parseInt(valCur, 0);

            if(valCur !== '' && !isNaN(valCur)){

                currentcell.css({'background-color': (aRef[r-2] > valCur) ? '#2ECC71' :'#EF4836'});

            }
        } // end for col

    } // end for row

})(jQuery);

Merci d'avance !

François Cammas

Est ce que tu aurais une page hébergée ? il faut voir si jquery est bien chargé et voir les erreurs js ....

Amneziik59

Auteur

Malheureusement non, c'est un projet qui tourne en local pour la société où je suis en alternance.
Jquery fonctionne bien puisque j'ai ajouté ce script à la suite d'un fichier JS (le fichier JS Main du thème que j'utilise : Vantage)
Et l'alerte fonctionne si elle est située avant le script

Lartak

Bonjour.
Jquery fonctionne bien puisque j'ai ajouté ce script à la suite d'un fichier JS (le fichier JS Main du thème que j'utilise : Vantage)
En général il faut charger Jquery avant tous les autres scripts et de préférence à la fin du code Html avant la fermeture de la balise body.

Amneziik59

Auteur

Voilà l'intégralité du fichier JS où j'ai mis le script.
Même si je met le script après le bloc de code qui est présent par défaut sur le fichier, le résultat est le même

(function($){

    var aRef = [];
    var colCount = $('table tbody tr:nth-child(1) td').length + 1;
    var rowCount = $('table tbody tr').length + 1;

    $('table tbody tr .default-value').each(function(){
    alert('salut');
        var valeurRef = $(this).text().replace('h', '').replace('%', '');
        aRef.push(valeurRef);

    });

    for(var r = 2; r<rowCount; r++){
        var current = 'table tbody tr:nth-child('+r+')';

        for(var c = 3; c<colCount; c++){
            var currentcell = $(current+' td:nth-child('+c+')');
            var valCur = currentcell.text().replace('h', '').replace('%', '');
            valCur = parseInt(valCur, 0);

            if(valCur !== '' && !isNaN(valCur)){

                currentcell.css({'background-color': (aRef[r-2] > valCur) ? '#2ECC71' :'#EF4836'});

            }
        } // end for col

    } // end for row

})(jQuery);

jQuery(function($){$('body.no-js').removeClass('no-js');$('.entry-content .flexslider:not(.metaslider .flexslider), #metaslider-demo.flexslider').flexslider({});$('.entry-content, .entry-content .panel').fitVids();if(!$('body').hasClass('mobile-device')){$(window).scroll(function(){if($(window).scrollTop()>150)$('#scroll-to-top').addClass('displayed');else $('#scroll-to-top').removeClass('displayed');});$('#scroll-to-top').click(function(){$("html, body").animate({scrollTop:"0px"});return false;});}
$('.vantage-carousel').each(function(){var $$=$(this);var wrap=$$.closest('.widget');var title=wrap.find('.widget-title');var position=0,page=1,fetching=false,complete=false;var updatePosition=function(){if(position<0)position=0;if(position>=$$.find('.carousel-entry').length-1){position=$$.find('.carousel-entry').length-1;if(!fetching&&!complete){fetching=true;page++;$$.append('<li class="loading"></li>');$.get($$.data('ajax-url'),{query:$$.data('query'),action:'vantage_carousel_load',paged:page},function(data,status){var $items=$(data.html);var count=$items.find('.carousel-entry').appendTo($$).hide().fadeIn().length;if(count==0){complete=true;$$.find('.loading').fadeOut(function(){$(this).remove()});}
else{$$.find('.loading').remove();}
fetching=false;})}}
var entry=$$.find('.carousel-entry').eq(0);$$.css('margin-left',-((entry.width()+parseInt(entry.css('margin-right')))*position)+'px');};title.find('a.previous').click(function(){position-=1;updatePosition();return false;});title.find('a.next').click(function(){position+=1;updatePosition();return false;});});$('#masthead').on('mouseenter','.main-navigation ul li',function(){var $$=$(this);var $ul=$$.find('> ul');$ul.css({'display':'block','opacity':0}).clearQueue().animate({opacity:1},250);$ul.data('final-opacity',1);}).on('mouseleave','.main-navigation ul li',function(){var $$=$(this);var $ul=$$.find('> ul');$ul.clearQueue().animate({opacity:0},250,function(){if($ul.data('final-opacity')==0){$ul.css('display','none');}});$ul.data('final-opacity',0);});$('#header-sidebar .widget_nav_menu').on('mouseenter','ul.menu li',function(){var $$=$(this);var $ul=$$.find('> ul');$ul.finish().css('opacity',0).hide().slideDown(200).animate({opacity:1},{queue:false,duration:200});}).on('mouseleave','ul.menu li',function(){var $$=$(this);var $ul=$$.find('> ul');$ul.finish().fadeOut(150);});var isSearchHover=false;$(document).click(function(){if(!isSearchHover)$('#search-icon form').fadeOut(250);});$(document).on('click','#search-icon-icon',function(){var $$=$(this).parent();$$.find('form').fadeToggle(250);setTimeout(function(){$$.find('input[name=s]').focus();},300);});$(document).on('mouseenter','#search-icon',function(){isSearchHover=true;}).on('mouseleave','#search-icon',function(){isSearchHover=false;});$(window).resize(function(){$('#search-icon .searchform').each(function(){$(this).width($(this).closest('.full-container').width());});}).resize();if($('nav.site-navigation.primary').hasClass('use-sticky-menu')&&!$('body').hasClass('mobile-device')){var adminBarHeight=$('body').hasClass('admin-bar')?$('#wpadminbar').outerHeight():0;var $mc=null;var resetStickyMenu=function(){var $$=$('nav.site-navigation.primary');if($$.position().top<=$(window).scrollTop()+adminBarHeight){if($mc==null){$mc=$$;$$=$$.clone().insertBefore($$);$mc.css({'position':'fixed','width':$$.outerWidth(),'top':adminBarHeight,'left':$$.position().left,'z-index':998}).addClass('sticky').insertAfter($$);}
else{$mc.css({'width':$$.outerWidth(),'left':$$.position().left});}}
else{if($mc!==null){$mc.remove();$mc=null;}}}
$(window).scroll(resetStickyMenu).resize(resetStickyMenu);resetStickyMenu();}
$('body.layout-full #main-slider[data-stretch="true"]').each(function(){var $$=$(this);$$.find('>div').css('max-width','100%');$$.find('.slides li').each(function(){var $s=$(this);var $img=$s.find('img.msDefaultImage').eq(0);if(!$img.length){$img=$s.find('img').eq(0);}
$s.css('background-image','url('+$img.attr('src')+')');$img.css('visibility','hidden');$s.wrapInner('<div class="full-container"></div>');});});var pixelRatio=!!window.devicePixelRatio?window.devicePixelRatio:1;if(pixelRatio>1){$('img[data-retina-image]').each(function(){var $$=$(this);$$.attr('src',$$.data('retina-image'));if(typeof $$.attr('width')=='undefined'){$$.load(function(){var size=[$$.width(),$$.height()];$$.width(size[0]/2);$$.height(size[1]/2);});}})}
$('#header-sidebar').each(function(){var $$=$(this);var padding=0;$$.find('> aside').each(function(){var thisPadding=($$.outerHeight()-$$.find('> aside').outerHeight())/2;if(thisPadding>padding)padding=thisPadding;});if(padding>15){$$.css({'padding-top':padding,'padding-bottom':padding});}
else{padding=-padding+15;$('header#masthead .logo > *').css({'padding-top':padding,'padding-bottom':padding});}});});

Lartak

Quand je dis qu'en général il faut charger jQuery avant les autres scripts, je veux parler de l'appel au script de jQuery via la balise :

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
/* ensuite tes autres appels de fichiers de scripts */

Amstramgram

J'aimerai bien savoir comment tu intègres tes fichiers js dans ton fichier footer.php. Tu passe par un wp_enqueue_script(); ? Ou tu les mets l'appel du script directement dans le footer.php

Amneziik59

Auteur

En fait, j'utilise le fichier functions.php pour générer automatiquement mes tableaux (vierge) à la création d'un article.
Et dans ce fichier functions.php, j'ai cette ligne la :

wp_enqueue_script( 'vantage-main' , get_template_directory_uri() . '/js/jquery.theme-main.min.js', array('jquery', 'flexslider', 'fitvids'), SITEORIGIN_THEME_VERSION );

Et le fichier inclu (jquery.theme-main.min.js) c'est le fichier que j'ai joins un peu plus haut, avec l'ensemble du code JQuery, y compris le script.

Amstramgram

Ok, si tu change avec le nom de tes fichiers cela doit fonctionner.

function theme_load_jquery() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, NULL, false); // load in head
    wp_enqueue_script('jquery');
}
if ( ! is_admin() ) {
    add_action('wp_enqueue_scripts', 'theme_load_jquery', 11);
}

function theme_scripts() {  
    // fitvids
    wp_enqueue_script( 'fitvids',  get_template_directory_uri() . '/js/fitvids.js', array( 'jquery' ), '1.1', true );

    // flexslider
    wp_enqueue_script( 'flexslider',  get_template_directory_uri() . '/js/jquery.flexslider.js', array( 'jquery' ), '2.2.2', true );

   // main scripts
    wp_enqueue_script( 'mainjs', get_template_directory_uri() . '/js/main.js', array( 'jquery', 'flexslider', 'fitvids' ), '01012015', true );

}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

Amneziik59

Auteur

J'ai donc essayé, toujours pas de résultat.
Voici la démarche effectuée :
J'ai mis ce bloc en commentaire :

/* function vantage_scripts() {
wp_enqueue_style( 'vantage-style', get_stylesheet_uri(), array(), SITEORIGIN_THEME_VERSION );
wp_enqueue_script( 'vantage-main' , get_template_directory_uri() . '/js/jquery.theme-main.min.js', array('jquery', 'flexslider', 'fitvids'), SITEORIGIN_THEME_VERSION );
wp_enqueue_style( 'vantage-fontawesome', get_template_directory_uri().'/fontawesome/css/font-awesome.css', array(), '3.2.1' );

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}

if ( is_singular() && wp_attachment_is_image() ) {
wp_enqueue_script( 'keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.min.js', array( 'jquery' ), '20120202' );
}
}
add_action( 'wp_enqueue_scripts', 'vantage_scripts' ); */

Puis j'ai remplacé par ça :

 function theme_load_jquery() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', get_template_directory_uri().'/js/jquery-1.11.1.min.js', false, NULL, false); // load in head
    wp_enqueue_script('jquery');
}
if ( ! is_admin() ) {
    add_action('wp_enqueue_scripts', 'theme_load_jquery', 11);
}

function vantage_scripts() {  
wp_enqueue_style( 'vantage-style', get_stylesheet_uri(), array(), SITEORIGIN_THEME_VERSION );
wp_enqueue_style( 'vantage-fontawesome', get_template_directory_uri().'/fontawesome/css/font-awesome.css', array(), '3.2.1' );
    // fitvids
    wp_enqueue_script( 'fitvids',  get_template_directory_uri() . '/js/jquery.fitvids.min.js', array( 'jquery' ), '1.1', true );

    // flexslider
    wp_enqueue_script( 'flexslider',  get_template_directory_uri() . '/js/jquery.flexslider.min.js', array( 'jquery' ), '2.2.2', true );

   // main scripts
    wp_enqueue_script( 'vantage-main', get_template_directory_uri() . '/js/jquery.theme-main.min.js', array( 'jquery', 'flexslider', 'fitvids' ), '01012015', true );

}
add_action( 'wp_enqueue_scripts', 'vantage_scripts' );

Amneziik59

Auteur

Désolé pour le Double-Post mais il y a du progré !
Voici le code que j'ai mis :

 function theme_load_jquery() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, NULL, false); // load in head
    wp_enqueue_script('jquery');
}
if ( ! is_admin() ) {
    add_action('wp_enqueue_scripts', 'theme_load_jquery', 11);
}

function vantage_register_scripts(){
    wp_enqueue_script( 'flexslider',  get_template_directory_uri() . '/js/jquery.flexslider.min.js', array( 'jquery' ), '2.2.2', true );
//wp_register_script( 'flexslider' , get_template_directory_uri() . '/js/jquery.flexslider.min.js' , array('jquery'), '2.1' );
wp_enqueue_script( 'fitvids',  get_template_directory_uri() . '/js/jquery.fitvids.min.js', array( 'jquery' ), '1.1', true );
//wp_register_script( 'fitvids' , get_template_directory_uri() . '/js/jquery.fitvids.min.js' , array('jquery'), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'vantage_register_scripts' , 5);

/**
 * Enqueue scripts and styles
 */
function vantage_scripts() {
wp_enqueue_style( 'vantage-style', get_stylesheet_uri(), array(), SITEORIGIN_THEME_VERSION );
wp_enqueue_script( 'vantage-main', get_template_directory_uri() . '/js/jquery.theme-main.min.js', array( 'jquery', 'flexslider', 'fitvids' ), '01012015', true );
//wp_enqueue_script( 'vantage-main' , get_template_directory_uri() . '/js/jquery.theme-main.min.js', array('jquery', 'flexslider', 'fitvids'), SITEORIGIN_THEME_VERSION );
wp_enqueue_style( 'vantage-fontawesome', get_template_directory_uri().'/fontawesome/css/font-awesome.css', array(), '3.2.1' );

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}

if ( is_singular() && wp_attachment_is_image() ) {
wp_enqueue_script( 'keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.min.js', array( 'jquery' ), '20120202' );
}
}
add_action( 'wp_enqueue_scripts', 'vantage_scripts' );

/**
 * Enqueue any webfonts we need
 */
function vantage_web_fonts(){
if( !siteorigin_setting('logo_image') ) {
wp_enqueue_style('vantage-google-webfont-roboto', 'http://fonts.googleapis.com/css?family=Roboto:300');
}
}
add_action( 'wp_enqueue_scripts', 'vantage_scripts' );

Désormais, chaque cellules que je remplis passe au rouge

Amneziik59

Auteur

Petit up !

On touche quasiment au but s'il vous plait :/

François Cammas

utilise le console.log pour voir ce que vaut tes variables et verifier les conditions ...

Amneziik59

Auteur

Bonjour tout le monde,

Désolé de relancer le sujet si tard, mais je me retrouve de nouveau confronter à un problème.
La structure de mon tableau ayant évoluée, j'ai beau essayer, rien n'y fait, je n'y arrive pas.

http://jsfiddle.net/ujog2mom/67/

Ci-dessus un lien JSFiddle.
Il se trouve qu'une cellule Obj sur 4 est colorée alors qu'elle ne devrait pas l'être.

J'ai chercher, essayer, modifier, mais pas moyen..

Une idée pour corriger ce léger problème ?

Merci d'avance !

Amneziik59

Auteur

Ca m'a l'air propre tout ça, merci beaucoup !!!
Juste un petit détail, il n'est pas possible de garder les cellules non remplies avec un background blanc ?

Parce que je ne sais pas trop si la fonction clean sert à ça, mais là, si une celulle n'est pas remplis, le bg passe au vert

Merci d'avance :$

Amneziik59

Auteur

Parfait !

Un énorme merci à toi !

Coloration de cellule d'un tableau

39 réponses