如何将背景颜色放在动态创建的 TR 元素上答案

【问题标题】：How to put background color on dynamically created TR element如何将背景颜色放在动态创建的 TR 元素上
【发布时间】：2017-02-01 12:03:37
【问题描述】：

我使用了 Bootstrap 日期时间选择器，现在我需要为 bootstrap 日历中的元素添加背景颜色。

我已经创建了这个 HTML：

<tr HERE I NEED STYLE>
    <td>
        <span class="timepicker-hour" data-time-component="hours" title="Pick Hour" data-action="showHours">01</span>
    </td>
    <td class="separator">:</td>
    <td>
        <span class="timepicker-minute" data-time-component="minutes" title="Pick Minute" data-action="showMinutes">30</span>
    </td>
    <td>
        <button class="btn btn-primary disabled" data-action="togglePeriod" tabindex="-1" title="Toggle Period">PM</button>
    </td>
</tr>

有没有简单的方法用 css 将背景放在第一个 TR 元素上？

【问题讨论】：

如果元素是动态的并且您需要为它们设置样式，则需要向 TR 添加一个类或在 css 中使用 :nth-child （或类似的）选择它们（正如 scoopzilla 在他们的回答）。如果您是生成这些行的人，那将变得微不足道。如果您不生成这些行，那就有点困难了。

标签： html twitter-bootstrap css tr

【解决方案1】：

希望它有效！使用内联样式

<tr style="background-color:blue;"><td><span class="timepicker-hour" data-time-component="hours" title="Pick Hour" data-action="showHours">01</span></td><td class="separator">:</td><td><span class="timepicker-minute" data-time-component="minutes" title="Pick Minute" data-action="showMinutes">30</span></td><td><button class="btn btn-primary disabled" data-action="togglePeriod" tabindex="-1" title="Toggle Period">PM</button></td></tr>

【讨论】：

【解决方案2】：

尝试使用 jQuery：

$("#id_of_tr").css('background-color', 'red');

【讨论】：

【解决方案3】：

为表创建一个全局<style>。

将<tr> 的样式放在那里。

<style type="text/css">
    tr {
      background-color: #ff0000;
    }
</style>

你甚至可以变得棘手，只将它添加到其他：

<style type="text/css">
    tr:nth-child(even){
      background: #ff0000
    }
</style>

只需在动态循环之前运行此样式即可。

【讨论】：

【解决方案4】：

我不确定，但这可能会对你有所帮助。

$('tr.some_class:first').css("background-color", "blue");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="some_class">
    <td><span class="timepicker-hour" data-time-component="hours" title="Pick Hour" data-action="showHours">01</span>
    </td>
    <td class="separator">:</td>
    <td><span class="timepicker-minute" data-time-component="minutes" title="Pick Minute" data-action="showMinutes">30</span>
    </td>
    <td>
      <button class="btn btn-primary disabled" data-action="togglePeriod" tabindex="-1" title="Toggle Period">PM</button>
    </td>
  </tr>
  <tr class="some_class">
    <td><span class="timepicker-hour" data-time-component="hours" title="Pick Hour" data-action="showHours">01</span>
    </td>
    <td class="separator">:</td>
    <td><span class="timepicker-minute" data-time-component="minutes" title="Pick Minute" data-action="showMinutes">30</span>
    </td>
    <td>
      <button class="btn btn-primary disabled" data-action="togglePeriod" tabindex="-1" title="Toggle Period">PM</button>
    </td>
  </tr>
  <tr class="some_class">
    <td><span class="timepicker-hour" data-time-component="hours" title="Pick Hour" data-action="showHours">01</span>
    </td>
    <td class="separator">:</td>
    <td><span class="timepicker-minute" data-time-component="minutes" title="Pick Minute" data-action="showMinutes">30</span>
    </td>
    <td>
      <button class="btn btn-primary disabled" data-action="togglePeriod" tabindex="-1" title="Toggle Period">PM</button>
    </td>
  </tr>
</table>

您还可以使用Math.random()生成随机颜色

var back = ["#ff0000","blue","gray"];

var rand = back[Math.floor(Math.random() * back.length)];

$('tr.some_class:first').css("背景色", rand);

【讨论】：