2
votes

Comment changer l'arrière-plan de la ligne de la table d'amorçage?

Si le résultat est "bon", je veux que la ligne entière devienne verte. Mais cela ne change rien.

https://jsfiddle.net/Tonato_/tnw3j5p2/7 /

Voici le code.

Je ne sais pas du tout quel est le problème. Je pense que j'ai tout fait correctement.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" />
<table data-row-style="rowStyle" class="table table-bordered table-hover thead-dark thead-inverse">
  <thead>
    <tr>
      <th scope="col" style="width: 8%" class="text-center">Number</th>
      <th scope="col" style="width: 20%" class="text-center">Name</th>
      <th scope="col" style="width: 61%" class="text-center">Present</th>
      <th scope="col" style="width: 10%" class="text-center">Result</th>
    </tr>
  </thead>
  <tr>
    <td class="text-center">01</td>
    <td class="text-center">$title01</td>
    <td>$present01</td>
    <td scope="row" class="text-center">GOOD</td>
  </tr>
  <tr>
    <td class="text-center">02</td>
    <td class="text-center">$title02</td>
    <td>$present02</td>
    <td scope="row" class="text-center">BAD</td>
  </tr>
  <tr>
    <td class="text-center">03</td>
    <td class="text-center">$title03</td>
    <td>$present03</td>
    <td scope="row" class="text-center">GOOD</td>
  </tr>
</table>

function rowStyle(row, index) {
  const obj = {};
  var classes = ['active', 'success', 'info', 'warning', 'danger'];
  if (Object.keys(row).map(key => row[key]).some(value => String(value).includes('BAD'))) {
    return Object.assign({}, obj, {
      classes: 'danger'
    });
  }
  if (Object.keys(row).map(key => row[key]).some(value => String(value).includes('GOOD'))) {
    return Object.assign({}, obj, {
      classes: 'success'
    });
  }
  return obj;
}

javascript jquery html bootstrap-4

1 commentaires

dans votre violon, je ne vois pas quand vous exécutez rowStyle (row, index)

3 Réponses :

0
votes

Ajoutez d'abord un identifiant à la table, puis enveloppez le tr avec .

$('#my-table tbody tr').each(function(i, item){
  var result = $(item).find('td').last().text();
  if(result === 'GOOD') $(item).css('background-color', 'green');
  else $(item).css('background-color', 'red');
})

  Ensuite, par jQuery, l'utilisation peut parcourir chaque tr de tbody dans votre table. Ensuite, en fonction de votre résultat, ajoutez css à cette ligne. 
 <table id='my-table' data-row-style="rowStyle" class="table table-bordered table-hover thead-dark thead-inverse">
    <thead>
    <tr>
      <th scope="col" style="width: 8%" class="text-center">Number</th>
      <th scope="col" style="width: 20%" class="text-center">Name</th>
      <th scope="col" style="width: 61%" class="text-center">Present</th>
      <th scope="col" style="width: 10%" class="text-center">Result</th>
    </tr>
    </thead>
    <tbody>
      <tr>
      <td class="text-center">01</td>
      <td class="text-center">$title01</td>
      <td>$present01</td>
      <td scope="row" class="text-center">GOOD</td>
    </tr>
    <tr>
      <td class="text-center">02</td>
      <td class="text-center">$title02</td>
      <td>$present02</td>
      <td scope="row" class="text-center">BAD</td>
    </tr>
    <tr>
      <td class="text-center">03</td>
      <td class="text-center">$title03</td>
      <td>$present03</td>
      <td scope="row" class="text-center">GOOD</td>
    </tr>
    </tbody>
  </table>

0 commentaires

1
votes

Je viens de mettre à jour votre code avec quelques modifications jQuery . Essayez ceci, j'espère que cela vous aidera. Merci

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" />
<table data-row-style="rowStyle" class="table table-bordered table-hover thead-dark thead-inverse">
  <thead>
    <tr>
      <th scope="col" style="width: 8%" class="text-center">Number</th>
      <th scope="col" style="width: 20%" class="text-center">Name</th>
      <th scope="col" style="width: 61%" class="text-center">Present</th>
      <th scope="col" style="width: 10%" class="text-center">Result</th>
    </tr>
  </thead>
  <tr>
    <td class="text-center">01</td>
    <td class="text-center">$title01</td>
    <td>$present01</td>
    <td scope="row" class="text-center">GOOD</td>
  </tr>
  <tr>
    <td class="text-center">02</td>
    <td class="text-center">$title02</td>
    <td>$present02</td>
    <td scope="row" class="text-center">BAD</td>
  </tr>
  <tr>
    <td class="text-center">03</td>
    <td class="text-center">$title03</td>
    <td>$present03</td>
    <td scope="row" class="text-center">GOOD</td>
  </tr>
</table>

$(document).ready(function() {
  $('.table tr td').each(function(i, v){
    if(v.textContent === 'GOOD') {
      $(v.parentElement).addClass('table-success');
    } else if(v.textContent === 'BAD') {
      $(v.parentElement).addClass('table-danger');
    }
  })  
})

9 commentaires

J'ai fait cette erreur après l'avoir modifiée et exécutée dans le script Bash. "v.parentElement: command not found" Le script Bash contient également du code Html.

pouvez-vous partager le lien? Merci

Je pense qu'il devrait être converti en JavaScript. Mais je ne sais pas comment me convertir.

Vous devez ajouter mon script jQuery dans la méthode $ (document) .ready . Je mets également à jour l'extrait de code ci-dessus. Merci

@ leej0978 si le problème persiste, veuillez m'en informer. Merci

Merci beaucoup. Cependant, l'erreur apparaît toujours. L'erreur suivante apparaît sur le terminal. :( document: commande non trouvée .table tr td: commande introuvable v.parentElement: commande introuvable

@ leej0978 Je viens de créer un violon avec le script ci-dessus sans erreur de console. Veuillez l'examiner. Merci jsfiddle.net/creative_sid5/txqhp7os

Cependant, l'erreur apparaît toujours. Je pense qu'il devrait être converti jquery en JavaScript. Mais je ne sais pas comment me convertir.

Une erreur est apparue sur le violon ou sur tout autre lien?

1
votes

Vous pouvez y parvenir en utilisant un simple code jQuery, exécutez l'extrait ci-dessous

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table data-row-style="rowStyle" class="table table-bordered table-hover thead-dark thead-inverse">
	<thead>
	<tr>
		<th scope="col" style="width: 8%" class="text-center">Number</th>
		<th scope="col" style="width: 20%" class="text-center">Name</th>
		<th scope="col" style="width: 61%" class="text-center">Present</th>
		<th scope="col" style="width: 10%" class="text-center">Result</th>
	</tr>
	</thead>
	<tr>
		<td class="text-center">01</td>
		<td class="text-center">$title01</td>
		<td>$present01</td>
		<td scope="row" class="text-center">GOOD</td>
	</tr>
	<tr>
		<td class="text-center">02</td>
		<td class="text-center">$title02</td>
		<td>$present02</td>
		<td scope="row" class="text-center">BAD</td>
	</tr>
	<tr>
		<td class="text-center">03</td>
		<td class="text-center">$title03</td>
		<td>$present03</td>
		<td scope="row" class="text-center">GOOD</td>
	</tr>
  </table>

$('table tr').each(function() {
    if($(this).find('td:last-child').html() === 'GOOD'){
        $(this).css('background-color', 'green');
    }
  })

0 commentaires