CODEWITHSUNDEEP
javascripthtmlcssclient-side-scripting
Jafa Kulio
Jafa Kulio

Reputation: 1

Edit text without class or ID

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!

Upvotes: 0

Views: 383

Answers (5)

Mark Salvania
Mark Salvania

Reputation: 484

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

Upvotes: 0

SpiRT
SpiRT

Reputation: 692

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

Upvotes: 0

brk
brk

Reputation: 50291

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`

Upvotes: 0

Thijs
Thijs

Reputation: 2351

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>

Upvotes: 1

Velimir Tchatchevsky
Velimir Tchatchevsky

Reputation: 2815

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/

Upvotes: 0

Related Questions