Javascript 将CSS应用于具有下一页的数据表

我有一个脚本，它可以工作并执行我需要的操作，但它只适用于前10行，而不适用于下一页。 我的表id是“MyTable”，这是我的JavaScript：

$(document).ready(function()
        {
            $(function() 
                {
                  $("#MyTable td").each(function() 
                  {
                    if ($(this).text() == 'Pending') 
                        {
                          $(this).css('background-color', '#F3E498');
                        }
                    if ($(this).text() == 'Approved') 
                        {
                          $(this).css('background-color', '#C5F97E');
                        }
                    if ($(this).text() == 'Denied') 
                        {
                          $(this).css('background-color', '#FF5733');
                        }
                    
                  });
                });
        });

所以不用说，我是kida，在第11排，我的剧本在接下来的几页中停止了工作，如果有任何建议，我将不胜感激。

---

只有数据表中可见的行才是DOM中的实际行。因此，您可以在每次页面更改时调用$.each循环，或者（我认为更好）使用或

下面是一个正在工作的JSFIDLE：

CSS

.approved {
  background-color: #C5F97E;
}

.denied {
  background-color: #FF5733;
}

.pending {
  background-color: #F3E498;
}

HTML

<table id="table">
  <thead>
    <th>ID</th>
    <th>Status</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Approved</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Denied</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Approved</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Pending</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Pending</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Pending</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Pending</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Pending</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Denied</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Pending</td>
    </tr>
    <tr>
      <td>11</td>
      <td>Pending</td>
    </tr>
    <tr>
      <td>12</td>
      <td>Approved</td>
    </tr>
    <tr>
      <td>13</td>
      <td>Denied</td>
    </tr>
  </tbody>
</table>

---

谢谢您的回复，但我两种都试过了，都不起作用，除非我做错了什么，否则它们甚至不会上色？我为“approved”创建了一个css类，这是我的代码$（'#MyTable'）.dataTable（{“createdRow”：函数（行、数据、数据索引）{if（数据[7]='approved'）{$（行）.addClass（'approved'）；}）；单元格也不工作：$（document）.ready（function（）$（'#MyTable'）.dataTable（{“columnDefs”：[{“targets”：-1，“createdCell”：function（td，cellData，rowData，row，col）{if（cellData='Approved'）{$（td.css（'color'，'red'）}}}）；}）；假设第7列是您想要的，并且您的样式表定义了.approved类，那么您需要将该类应用于TD而不是行，即

$（row）.find（'TD'）.addClass（'approved'）刚刚添加了一个JSFIDLE来演示。谢谢@Adey_888，它不起作用。我有8列，所以最后一列是包含状态的#7。。但即使这样，我对单元格颜色感兴趣，而不是整行，我是否可以使用CreatedCell来代替？$（“#MyTable”）.dataTable（{“createdRow”：函数（行、数据、数据索引）{switch（数据[7]）{case“Approved”：$（行）。find（'td'）。addClass（'Approved'）；break；case“Denied”：$（行）。find（'td'）。addClass（'denied'）；break；case“Pending”：$（row.find（'td'）.addClass（'Pending'）；break；}）；
$('#table').dataTable({
  'columnDefs': [{
    'targets': 1,
    'createdCell': function(td, cellData, rowData, row, col) {
      switch (cellData) {
        case 'Approved':
          $(td).addClass('approved');
          break;
        case 'Denied':
          $(td).addClass('denied');
          break;
        case 'Pending':
          $(td).addClass('pending');
          break;
      }
    }
  }]
});