Color background of row (row) in django admin

Question

Color background of row (row) in django admin

Navigation

#1 by (0 votes)
#2 by (0 votes)

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 entire line depending on the column's status.

<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 just the cell?

javascript python django

asked by anonymous 19.02.2018 / 14:46

2 answers

0

Note that you are selecting $('#result_list tr td:nth-child(4)') in this way, you will only select td . $('#result_list tr') to be able to apply css to lines instead of only td selected.

19.02.2018 / 15:27

Values do not serialize on return in REST with Jersey Save name and image extension and upload to a specific folder in php and then show in a table

score 0 · Accepted Answer

You can find the line containing 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><tableid="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><tableid="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>