javascript - 将类添加到 html 表格的特定单元格

Question

我正在致力于为我的公司实现一些报告的自动化。我们使用 R 在 Excel 中汇总数据，然后结合使用 Rmarkdown、knitr 和“htmlTable”包来创建 HTML。

我目前正在使用 CSS 来修改 HTML 代码的某些部分

markdownToHTML(paste0(basePath,'makeAppendixTableD1.md'),
             "appendixTableD1.html",
             stylesheet = paste0(basePath,"testStyleSheetUpdated.css")) 

上面的 HTML 代码输出如下所示:

<table class='gmisc_table' style='border-collapse: collapse; margin-top: 1em; margin-bottom: 1em;' >
<tbody>
<tr>
<td style='text-align: center;'>X1</td>
<td style='text-align: center;'>0</td>
</tr>
<tr>
<td style='text-align: center;'>X2</td>
<td style='text-align: center;'>0.35</td>
</tr>
<tr>
<td style='text-align: center;'>X3</td>
<td style='text-align: center;'>0.31</td>
</tr>
</tbody>
</table>

我可以使用 CSS 轻松更改字体大小或字体系列等属性；但是，我对如何最好地编辑特定的列或行感到有点困惑。

例如，我想让 X2 为粗体和斜体。但我并不总是知道 X2 在表中的位置。所以我不能放入CSS来修改第二行，第一个单元格，因为另一个表X2可能是第10行，第一个单元格。

编辑:理想情况下，我希望能够编辑整个 <tr> </tr>当 X2 存在于 HTML 中时。

目前，我可以使用gsub()和其他一些字符串函数在 HTML 中查找 X2，然后返回几个字符以插入 class =“X2”。但这涉及相当多的硬编码。

是否有更简单的方法使用 javaScript 来做到这一点？我研究过在 R 中使用 xtable 包。似乎没有办法在 R 中使用 htmlTable 包添加类。

Answer 1

使用 vanilla JS，您可以执行以下操作:

//grab all td elements in your table
var tds = document.querySelectorAll(".gmisc_table td");
//iterate over each td
for (var i = 0; i < tds.length; i++) {
  var text = tds[i].innerText;
  //check for your target text
  if (text === "X2") {
    //add your class to the element containing this text
    tds[i].classList.add("X2");
  }
}