Question

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

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

Answer 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

Bootstrap表：按数据值更改行颜色

1 个答案: