javascript - CSS 效果适用于静态表格数据，但当表格数据由 javascript 添加时效果不佳

Question

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

这是我在页面加载时调用的函数中填充表格的代码块。

//Populate table
var table = document.getElementById("JobPercentCompleteTable");
var rowCount = table.rows.length;
var numJobs = obj.length

for(var i = 0; i < numJobs; i++)
{
    var row = table.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++;

}

只要静态行存在，一切正常，但是一旦我删除静态行并且只有由 javascript 创建的行，悬停效果就消失了。

这是应该生效的 CSS:

.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;
}

Answer 1

我为向表中添加新行而编写的 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++;
      }