使用Jquery基于td变量值更改行颜色

时间:2018-05-31 14:15:15

标签: javascript html css

我看到了this question。在我的特殊情况下,我在不同的房间里有机器。所以,让我们说我的表包含列:房间,机器等。一个房间可能包含许多机器。

我需要在room_name更改时更改行颜色。

我尝试了这个,但它没有用。

var tbl = document.getElementById("tblMain");
if (tbl != null) {
  if (tbl.rows[0] != null) {
    var room = document.getElementById("tblMain").rows[1].cells[0].innerHTML;
    tbl.rows[0].style.backgroundColor = "#f1fafa";
  }

  for (var i = 1; i < tbl.rows.length; i++) {
    if (room == document.getElementById("tblMain").rows[i].cells[0].innerHTML;)
      tbl.rows[i].style.backgroundColor = "#f1fafa";
  }

  room = document.getElementById("tblMain").rows[i].cells[0].innerHTML;
}
<table class="hoverTable dataTable" id="tblMain">
  <thead>
    <tr>
      <th>Room</th>
      <th>Machine</th>
      <th>Serial Number</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach ($assignations as $assignation): ?>
      <tr>
        <td>
          <?= $assignation->has('room') ? $assignation->room->name : '-' ?>
        </td>
        <td>
          <?= $assignation->has('machine') ? $assignation->machine->name : '' ?>
        </td>
        <td>
          <?= $assignation->has('machine') ? $assignation->machine->serial_number : '' ?>
        </td>
      </tr>
    <?php endforeach; ?>
  </tbody>
</table>

以下是我需要的输出示例:

&#13;
&#13;
<table border="1" cellpadding="4" cellspacing="4">
<tr>
    <td>room 1</td>
    <td>machine 1</td>
</tr>
<tr bgcolor="#FF0000">
    <td>room 2</td>
    <td>machine 2</td>
</tr>
<tr bgcolor="#FF0000">
    <td>room 2</td>
    <td>machine 3</td>
</tr>
<tr>
    <td>room 4</td>
    <td>machine 4</td>
</tr>
<tr bgcolor="#FF0000">
    <td>room 7</td>
    <td>machine 5</td>
</tr>
</table>
&#13;
&#13;
&#13;

0 个答案:

没有答案