Edit text without class or ID

Question

I need to format certain line of text on the client side, but I cannot modify the actual code. The HTML is generated dynamically but I can put the code snippet with JS and CSS on top to style it. Here is the HTML:

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

Since all Td's have the same role and class, but I need to only change word Administration to "Category - Administration", how can I do this? I tried the following script but it didn't work.

<script>
document.getElementByName("Administration").innerHTML = "Category - Administration";
</script>

Greatly appreciate any help!

loop td with class gridcell - then make if statment on innerHTML and change just a line that you need — SpiRT, Sep 07 '18 at 18:55
if the cell is always at the same place in the HTML table , you can select it via nth-child, . If you shared enough of your html table and if that cell is always at the same position, then i could make an answer describing the idea with a working demo based on CSS without js needs. looks like header .... — G-Cyrillus, Sep 07 '18 at 20:34

score 1 · Answer 1 · answered Sep 07 '18 at 18:57

You could do it by comparing the text content of the cells. Of course this is error prone and if the text is somehow slightly different it will break. But if there is no other way around it, the sample below should help you.

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>

score 0 · Answer 2 · answered Sep 07 '18 at 18:54

0

if it's always the third td you can use plain css td:eq(3){/*style here*/} otherwise you can use javascript, there's also a useful jQuery function - https://api.jquery.com/contains-selector/

answered Sep 07 '18 at 18:54

Velimir Tchatchevsky

2,812
1
16
21

You can also find this post helpful as an example https://stackoverflow.com/questions/21339462/find-td-with-specific-text-and-operate-on-the-td-right-after-that-one – let_the_coding_begin Sep 07 '18 at 18:55

brk · Answer 3 · 2018-09-07T19:01:05.383

Use document.qurySelectorAll and check the textContent and replace that text where it matches

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>

To avoid forEach you can use conventional for loop

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>

if 1document.qurySelectorAllis not supported then usedocument.getElementsByTagName`

Note IE doesn't support forEach on NodeList – charlietfl Sep 07 '18 at 18:57 — charlietfl, Sep 07 '18 at 18:57

score 0 · Answer 4 · edited Sep 08 '18 at 00:25

0

You can use the following solution to edit text without a class or id:

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

edited Sep 08 '18 at 00:25

Grant Miller

27,532
16
147
165

answered Sep 07 '18 at 18:57

SpiRT

632
7
14

and it is more or less same approach for pure js – SpiRT Sep 07 '18 at 18:58

Mark Salvania · Answer 5 · 2018-09-10T00:35:45.187

First make sure this <td> are inside <tr> and <table>. Use .querySelectorAll to get all elements in the document with class="ms-cellstyle" then use .forEach() method to call a provided function once for each element in an array

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

Reference: .querySelectorAll .forEach()

Edit text without class or ID

5 Answers5