引导表：按数据值更改行颜色答案

【问题标题】：Bootstrap table: change row color by data value引导表：按数据值更改行颜色
【发布时间】：2017-10-19 02:22:46
【问题描述】：

如何根据行的数据值更改引导表中行的颜色。（如果日期列比今天旧，我希望文本为红色）。

我精通 C++ 和 C#，但不熟悉 JS 和 JQuery

代码如下：

<table data-toggle="table"
    data-url="GenerateJSonEmailList.php"
    data-sort-name="stargazers_count"
    data-sort-order="desc">

    <thead>
        <tr>
            <th data-field="idProspects" 
                data-sortable="true">
                    ID
            </th>
            <th data-field="Prenom" 
                data-sortable="true">
                    Prénom
            </th>
            <th data-field="Nom" 
                data-sortable="true">
                    Nom
            </th>
            <th data-field="EmailAddress" 
                data-sortable="true">
                    Adrese courriel
            </th>
            <th data-field="DateNextEmail" 
                data-sortable="true">
                    Date
            </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

【问题讨论】：

（取决于行的数据值）这是什么意思？
var theDateYouWant = $('selectorForDatCol').text(); 'selectorForDatCol' 可以是一个类，或者一个 id... 甚至 'tr td:last-child' 或 'tr td:nth-child(n)' 在 javascript 中，您可以将 dom-element 的内容作为变量使用 element.innerHTML

标签： html css twitter-bootstrap dynamic html-table

【解决方案1】：

为您的日期字段分配类并通过 jquery 循环它。将日期字段值转换为日期格式，然后与当前日期进行比较。

HTML

<table>
<thead>
    <tr>
        <th data-field="idProspects" 
            data-sortable="true">
                ID
        </th>
        <th data-field="Prenom" 
            data-sortable="true">
                Prénom
        </th>
        <th data-field="Nom" 
            data-sortable="true">
                Nom
        </th>
        <th data-field="EmailAddress" 
            data-sortable="true">
                Adrese courriel
        </th>
        <th data-field="DateNextEmail" 
            data-sortable="true">
                Date
        </th>
    </tr>
</thead>
<tbody>
<tr>      
  <td>test</td>
  <td>test</td>
  <td>test</td>
  <td>test</td>
  <td class="datefield">05/11/2017</td>
</tr>
<tr>      
  <td>test</td>
  <td>test</td>
  <td>test</td>
  <td>test</td>
  <td class="datefield">05/23/2017</td>
</tr>
<tr>      
  <td>test</td>
  <td>test</td>
  <td>test</td>
  <td>test</td>
  <td class="datefield">05/18/2017</td>
</tr>
</tbody>
</table>

JQUERY

 $(document).ready(function(){
   var CurrentDate = new Date();
   $('.datefield').each(function(){
      var SelectedDate = new Date($(this).text());
      if(CurrentDate > SelectedDate) {
          $(this).css('color', 'red');
      }
   });
 });

FIDDLE DEMO

【讨论】：