Как изменить фон строки загрузочной таблицы?

Question

Если результат «хороший», я хочу, чтобы весь ряд стал зеленым.Но это ничего не меняет.

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

Вот код.

Я вообще не понимаю, в чем проблема.Я думаю, что все сделал правильно.

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;
}

<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>

Answer 1

Я просто обновляю ваш код с небольшими jQuery изменениями.Попробуйте это, я надеюсь, это поможет вам.Спасибо

$(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');
    }
  })  
})

<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>

Answer 2

Вы можете достичь этого с помощью простого кода jQuery. Запустите фрагмент ниже

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

<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>

Answer 3

Сначала добавьте идентификатор в таблицу, а затем оберните tr с помощью <tbody>.

<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>

Затем, используя jQuery, вы можете перебирать каждую строку текста в вашей таблице. Затем, основываясь на вашем результате, добавьте css в эту строку.

$('#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');
})