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轻松更改font-size或font-family等属性;但是，我对如何最好地编辑特定的列或行感到有些困惑。

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

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

目前，我可以使用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");
  }
}

Answer 2

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'})

Answer 3

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>

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

3 个答案: