CSS效果可以很好地处理静态表数据，但不能在javascript添加表数据时使用

我的html文档中有一个用css设计的表。当我在html中硬编码表格行和单元格时，样式按预期工作。例如，当我将鼠标悬停在一行上时，颜色会发生变化

问题是，当我通过javascript添加所有表行和单元格时，悬停效果不再起作用。奇怪的是，如果我离开静态数据，并通过javascript添加数据，那么样式就可以正常工作

当我想通过javascript填充表中的所有数据时，如何使样式正常工作

<table class="table table-striped table-bordered table-hover" id="JobPercentCompleteTable">
<thead>
<tr>
  <th>#</th>
  <th>Job Number</th>
  <th>Total Hours</th>
  <th>Completed Hours</th>
  <th>% Complete</th>
</tr>
</thead>
<tbody>
<!-- Static Row -->
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td> 
</tr>
<!-- Javascript Added Row -->
<tr>
  <td>One</td>
  <td>Two</td>
  <td>Three</td>
  <td>Four</td>
  <td>Five</td>
</tr>
</tbody>
</table>

---

问题似乎出在动态填充表的JS函数中：

• 如果使用ID将悬停事件侦听器绑定到行，请确保生成的行具有预期的ID，并且所有事件侦听器都已就位
• 如果将类用作绑定事件的选择器，则类似的情况是：确保行具有准确的预期类
• 确保生成的表中的HTML结构是预期的：CSS规则期望选择器有另一个类包装绑定的元素。例如：
  第二类：悬停{
  如果class2不在class1内，则不会被应用

---

我为向表中添加新行而编写的javascript实际上是将新行添加到表的标题部分，而不是正文部分。在将行专门添加到表正文后，样式设计按需要工作。下面是我用于填充表的新代码

//Populate table
      var tableBody = document.getElementById("JobPercentCompleteTableBody");
      var rowCount = tableBody.rows.length;

      var numJobs = obj.length
      for(var i = 0; i < numJobs; i++)
      {
        var row = tableBody.insertRow(rowCount);
        var jobData = obj[i];

        row.insertCell(0).innerHTML= rowCount;
        row.insertCell(1).innerHTML= jobData.jobNum;
        var totalHours = (jobData.compHrs + jobData.notCompHrs).toFixed(2);
        row.insertCell(2).innerHTML= totalHours;
        row.insertCell(3).innerHTML= jobData.compHrs;
        var percentComp = ((jobData.compHrs / totalHours) * 100).toFixed(2);
        row.insertCell(4).innerHTML= percentComp;
        rowCount++;
      }

//填充表
var tableBody=document.getElementById（“JobPercentCompleteTableBody”）；
var rowCount=tableBody.rows.length；
var numJobs=对象长度
对于（var i=0；i

您确定它输出的HTML与您的硬编码版本（在类、ID、元素等方面）完全相同吗HTML看起来完全一样。而且，表和类的定义是在硬编码HTML中定义的，所以这永远不会改变。我在javascript中所做的一切就是添加与静态数据看起来完全相同的行。1MarkOtto@mdo.....Hi，我们能看到一些代码吗？看到硬编码的表行和动态调用会非常有用y创建了行。另外，你能给我们看一下你的CSS定义吗？对不起，伙计们，我是新来的，正在尝试以正确的方式添加一些代码。请继续关注。如果你也可以添加CSS，那么上面的所有问题（标记的html、CSS、js）都会非常多我想这适用于所有这些问题，也许你可以更具体一些，针对这一特殊问题？你能重新表述你的问题吗？更具体地针对哪一个特殊问题？（哇，投反对票？）对我来说，你的答案是广泛的，因为你所写的内容适用于html页面中的所有内容。此外，要回答一个明确与代码相关的问题，而我却没有看到代码，这对我来说是一个“胡乱猜测”，因此会投反对票。请随意选择一些更有价值的答案，反对票就会消失。

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #f5f5f5;
}

//Populate table
      var tableBody = document.getElementById("JobPercentCompleteTableBody");
      var rowCount = tableBody.rows.length;

      var numJobs = obj.length
      for(var i = 0; i < numJobs; i++)
      {
        var row = tableBody.insertRow(rowCount);
        var jobData = obj[i];

        row.insertCell(0).innerHTML= rowCount;
        row.insertCell(1).innerHTML= jobData.jobNum;
        var totalHours = (jobData.compHrs + jobData.notCompHrs).toFixed(2);
        row.insertCell(2).innerHTML= totalHours;
        row.insertCell(3).innerHTML= jobData.compHrs;
        var percentComp = ((jobData.compHrs / totalHours) * 100).toFixed(2);
        row.insertCell(4).innerHTML= percentComp;
        rowCount++;
      }