Jquery: Reset Classes Once The Field Is Empty

NOTE: The following solution comes from THIS TOPIC, please see that first. I have 11 inputs: (Where [something] is a nam

Solution 1:

Small addition in your code. Let me try to explain what was happening in your code.

At first try:

1. your code gets the input values (eg. 89.30.20)
2. Loop through all available values in the table
3. Split each value by '.'
4. Then loop through these spitted values to check for match and highlight

5. Replace the matched number to highlighted span (i.e 20 to 20 and unmatched number to faded span.

   This all works for first time. But at the second try, your code breaks from step 3. As in step 3 code tries to split values by '.' but the values were replaced with Span values in your first try. So now to rectify this issue I added small check and 2-3 lines of extra code to extract actual values from Span values.

That extra code is:

// Check if values bar already contains Span tags (means already processed in first try var hasSpans = bar.find('span').length>0;
    if(hasSpans) 
    {
      //If yes then extract the actual values from these span tags without '.' (This will work for all tries after FIRST)
      barnum=bar.find('span').map(
      function() { 
      if($(this).html() != '.') 
        return $(this).html().replace('.','');
      }).get();
      }
   // else normal case, split the values by '.' (This will for very FIRST try)else barnum = bar.html().split('.');

$(document).on("change", ".inputs", function(){
    var thisclass = $(this).attr('class').split("-")[0];
    if($(this).val() == ''){
        //
    }
    highlightInputNumbers(thisclass, 0);

});


functionhighlightInputNumbers(classe, stepcount, empty){

        var all= $("td[class*="+classe+"]");
        var index = all.length-1;
        var concat_steps = $(all[index]).html().split('.')

        //var due_serie = $(all[index]).html().split('.')var due_serie = $('.'+classe+'-input').val().split('.')

        for (var i = index; i >= (index-stepcount)+2; i--) {
            due_serie = due_serie.concat($(all[i-1]).html().split('.'));
        };

        //Rimuovo i doppionivar serieCompleta = [];
        $.each(due_serie, function(i, el){
            if($.inArray(el, serieCompleta) === -1) serieCompleta.push(el);
        });

        //Ottengo dati          for(var s = 0; s < index-(stepcount-1); s++){
            
            
            var bar = $(all[s]);
            var barnum;
            var hasSpans = bar.find('span').length>0;
            if(hasSpans) 
              {
                barnum=bar.find('span').map(
                  function() { 
                    if($(this).html() != '.') 
                      return $(this).html().replace('.','');
                     }).get();
              }
            else barnum = bar.html().split('.');
            bar.html('');

            var found = 0;

            for(i = 0; i<= barnum.length-1; i++){

               for(n = 0; n<= serieCompleta.length-1; n++){

                  if(i != 4){ var punto = '.' }else{ var punto = ''}

                      /* Problem here:*/if(barnum[i] == serieCompleta[n]){
                        bar.append('<span class="highlight">'+barnum[i]+'</span><span class="fade">'+punto+'</span>');
                        found = barnum[i];
                      }
                 }

               if(barnum[i] != found){
                bar.append('<span class="fade">'+barnum[i]+punto+'</span>');
               }
             }

          }
      }

span.highlight{
  color:green;
  font-weight:bold;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tr><td>02/05/2015</td><tdclass="bari1">89.10.86.30.65</td></tr><tr><td>30/04/2015</td><tdclass="bari2">96.11.73.36.13</td></tr><tr><td>02/05/2015</td><tdclass="bari3">78.34.50.72.11</td></tr><tr><td>30/04/2015</td><tdclass="bari4">34.78.69.60.22</td></tr><tr><td>02/05/2015</td><tdclass="bari5">12.29.30.69.33</td></tr><tr><td>30/04/2015</td><tdclass="bari6">59.10.20.96.44</td></tr><tr><tdcolspan="2"><inputtype="text"class="bari-input inputs"></td></tr></table><table><tr><td>02/05/2015</td><tdclass="vari1">89.10.86.30.65</td></tr><tr><td>30/04/2015</td><tdclass="vari2">96.11.73.36.13</td></tr><tr><td>02/05/2015</td><tdclass="vari3">78.34.50.72.11</td></tr><tr><td>30/04/2015</td><tdclass="vari4">34.78.69.60.22</td></tr><tr><td>02/05/2015</td><tdclass="vari5">12.29.30.69.33</td></tr><tr><td>30/04/2015</td><tdclass="vari6">59.10.20.96.44</td></tr><tr><tdcolspan="2"><inputtype="text"class="vari-input inputs"></td></tr></table>