Question

我需要在客户端格式化某些文本行，但是我不能修改实际代码。 HTML是动态生成的，但是我可以将JS和CSS的代码片段放在顶部以对其进行样式设置。这是HTML：

style="rmarkdown"

由于所有Td具有相同的角色和类，但是我只需要将“管理”一词更改为“类别-管理”，我该怎么做？我尝试了以下脚本，但没有用。

knitr::kable

非常感谢您的帮助！

Answer 1

您可以通过比较单元格的文本内容来实现。当然，这很容易出错，如果文本稍有不同，它将损坏。但是，如果没有其他解决方法，下面的示例应为您提供帮助。

document.querySelectorAll('.ms-cellstyle').forEach(cell => {
  if (cell.textContent === 'Administration') {
    cell.textContent = 'Category - Administration';
  }
});

<table>
  <tr>
    <td role="gridcell" class="ms-cellstyle ms-vb2">Daily Reports</td>
    <td role="gridcell" class="ms-cellstyle ms-vb2">Construction</td>
    <td role="gridcell" class="ms-cellstyle ms-vb2">Administration</td>
  </tr>
</table>

Answer 2

如果它始终是第三个td，则可以使用纯CSS td:eq(3){/*style here*/}，否则可以使用javascript，还有一个有用的jQuery函数-https://api.jquery.com/contains-selector/

Answer 3

使用document.qurySelectorAll并检查textContent并在匹配的地方替换该文本

document.querySelectorAll('td').forEach(function(item) {
  if (item.textContent.trim() === 'Administration') {

    item.textContent = 'Some other text'
  }

})

<table>
  <tr>
    <td role="gridcell" class="ms-cellstyle ms-vb2">Daily Reports</td>
    <td role="gridcell" class="ms-cellstyle ms-vb2">Construction</td>
    <td role="gridcell" class="ms-cellstyle ms-vb2">Administration</td>
  </tr>
</table>

要避免forEach，可以使用常规的for循环

let m = document.querySelectorAll('td');
for (var item = 0; item < m.length; item++) {
  if (m[item].textContent.trim() === 'Administration') {
    m[item].textContent = 'Some other text'
  }

}

<table>
  <tr>
    <td role="gridcell" class="ms-cellstyle ms-vb2">Daily Reports</td>
    <td role="gridcell" class="ms-cellstyle ms-vb2">Construction</td>
    <td role="gridcell" class="ms-cellstyle ms-vb2">Administration</td>
  </tr>
</table>

如果1document.qurySelectorAll is not supported then use document.getElementsByTagName`

Answer 4

您可以使用以下解决方案来编辑不带class或id的文本：

$('.ms-cellstyle').each(function() {
   if ($(this).text()=="Administration")
   $(this).text("Category - Administration");
});

Answer 5

首先请确保此<td>位于<tr>和<table>中。使用.querySelectorAll通过class="ms-cellstyle"获取文档中的所有元素，然后使用.forEach（）方法为数组中的每个元素调用一次提供的函数

document.querySelectorAll('.ms-cellstyle').forEach(td => {(td.textContent == 'Administration') ? td.textContent = 'Category - Administration': ;});

参考：.querySelectorAll .forEach()

编辑没有类别或ID的文本

5 个答案: