Coloring line background(Row) on Django admin

Asked

Viewed 213 times

1

I have a code that is working, but not totally with what I want, it is coloring only the selected cell, I want to color the whole line depending on the status of the column.. follows the code:

<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('#result_list tr td:nth-child(4)').each(function() {
if ($(this).text() == 'ARQUIVADO') {
  $(this).css({
      "background-color": 'yellow',
      "color" : "#000000"
  });
}
if ($(this).text() == 'TITULO EMITIDO') {
  $(this).css({
      "background-color": 'darkblue',
      "color" : "#FFFFFF"
  });
}
if ($(this).text() == 'PROCESSO LANÇADO') {
 $(this).css({
     "background-color": 'blue',
      "color" : "white"
  });
}
if ($(this).text() == 'TITULO ENTREGUE') {
  $(this).css({
      "background-color": 'green',
      "color" : "white"
  });
}

});
});
})(django.jQuery);
</script>

How do you color the entire line and not only the cell ?

javascript python django

  • You also cannot change the question by adding another one when you already have answers. In case you would have to ask another question, but I already put in the comment there a solution.

3 answers

0

Notice that you are selecting $('#result_list tr td:nth-child(4)') this way, it will select only the td. do as follows $('#result_list tr') to be able to apply the css on the lines instead of only adding to the td selected.

  • In this way he colored all the lines in the same color, I did not explain, but there are other functions, one for each status (filed, sent, received, etc.) and it is necessary that it be a different color for each row, depending on the status of the column (in this case column 4)

  • In this case, you have to make a specific selection, for example, if you want to color line four, just do this $('#result_list tr:nth-child(4)')

0


You can find the line that contains the word with :contains and apply the desired color on the line:

$(document).ready(function() {
   $('#result_list tr:contains("ARQUIVADO")').each(function() {
      $(this).css({
         "background-color": 'yellow',
       "color" : "#000000"
     });
   });
});

Example:

$(document).ready(function() {
   $('#result_list tr:contains("ARQUIVADO")').each(function() {
      $(this).css({
         "background-color": 'yellow',
       "color" : "#000000"
     });
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="result_list">
   <tr>
      <td>
         1
      </td>
      <td>
         2
      </td>
      <td>
         3
      </td>
      <td>
         4
      </td>
   </tr>
   <tr>
      <td>
         ARQUIVADO
      </td>
      <td>
         2
      </td>
      <td>
         3
      </td>
      <td>
         4
      </td>
   </tr>
   <tr>
      <td>
         1
      </td>
      <td>
         2
      </td>
      <td>
         3
      </td>
      <td>
         ARQUIVADO
      </td>
   </tr>
</table>

You can use for different words:

$(document).ready(function() {
   var fundo, cor;
   $('#result_list tr').each(function() {
      if($(this).is(':contains("ARQUIVADO")')) fundo = 'yellow', cor = '#000';
      if($(this).is(':contains("RECEBIDO")')) fundo = 'red', cor = '#fff';
      if($(this).is(':contains("ENVIADO")')) fundo = 'blue', cor = '#fff';
      
      $(this).css({
         "background-color": fundo,
         "color" : cor
      });
      
      fundo = cor = '';
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="result_list">
   <tr>
      <td>
         1
      </td>
      <td>
         2
      </td>
      <td>
         3
      </td>
      <td>
         RECEBIDO
      </td>
   </tr>
   <tr>
      <td>
         1
      </td>
      <td>
         2
      </td>
      <td>
         3
      </td>
      <td>
         ARQUIVADO
      </td>
   </tr>
   <tr>
      <td>
         1
      </td>
      <td>
         2
      </td>
      <td>
         3
      </td>
      <td>
         ENVIADO
      </td>
   </tr>
   <tr>
      <td>
         1
      </td>
      <td>
         2
      </td>
      <td>
         3
      </td>
      <td>
         NADA
      </td>
   </tr>
</table>

-1

Where do I put this code in Django-Admin?

(Document). ready(Function() { background var, colour; $('#result_list tr'). each(Function() { if($(this).is(':contains("FILED")')) background = 'Yellow', color = '#000'; if($(this).is(':contains("RECEIVED")')) background = 'red', color = '#fff'; if($(this).is(':contains("SENT")')) background = 'blue', color = '#fff';

  $(this).css({
     "background-color": fundo,
     "color" : cor
  });
  
  fundo = cor = '';

}); });

Browser other questions tagged javascript python django

You are not signed in. Login or sign up in order to post.