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

Adding class to specific cells of a html table

本文关键字：单元格 html 添加      更新时间：2023-10-14

我正在努力为我的公司自动化一些报告。我们使用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行，第一个单元格。

编辑

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

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

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

使用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");
  }
}

Pure JS：

Array.prototype.slice.call( document.getElementsByTagName("td"), 0 )
  .filter(function(x) {return x.innerHTML.match(/X2/)})
  .forEach(function(x) {
             x.classList.add('X2')                          // <td>
             x.parentNode.classList.add('OtherClassName')   // <tr>
  })

最后一个x是 <td>的 DOM 表示 ，因此您可以从那里导航到您喜欢的任何地方，就像最后一行对x.parentNode所做的那样，这是<tr>......

jQuery 仅在第一行：

$.makeArray($("td"))
  .filter(function(x) {return x.innerHTML.match(/X2/)})
  .forEach(function(x) {x.classList.add('X2')})

带有jQuery的ES6(由于尚不支持=>，因此在IE11中不起作用(：

$.makeArray($("td"))
  .filter(x => x.innerHTML.match(/X2/))
  .forEach(x => x.classList.add('X2'))

如果需要，您可以更改第二行以筛选完全匹配：

.filter(function(x) {return x.innerHTML === 'X2'})


var table = document.getElementsByTagName('table')[0];
var cols = table.getElementsByTagName('td');
for (var i = 0; i < cols.length; i++) {
  
  var col = cols[i];
  
  var content = col.innerText;
  
  // If it starts with 'X':
  if (content[0] === 'X') {
    col.className = content;
  }
}
.X1 { color: red; }
.X2 { color: blue; }
<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>

相关文章：