如何更改引導表行背景？

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

首先向表中添加一個 id，然后用<tbody>包裹 tr。

<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 使用可以循環遍歷表中 tbody 的每個 tr。 然后根據您的結果，將 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');
})