Редактировать текст без класса или ID - PullRequest
Новая
       21

Редактировать текст без класса или ID

0 голосов
/ 07 сентября 2018

Мне нужно отформатировать определенную строку текста на стороне клиента, но я не могу изменить реальный код. HTML генерируется динамически, но я могу поместить фрагмент кода с JS и CSS сверху, чтобы стилизовать его. Вот 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>

Поскольку все Td имеют одинаковую роль и класс, но мне нужно только изменить слово Administration на «Category - Administration», как я могу это сделать? Я попробовал следующий скрипт, но он не сработал. 

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

Очень ценю любую помощь!

Ответы [ 5 ]

0 голосов
/ 07 сентября 2018

Сначала убедитесь, что <td> находится внутри <tr> и <table>. Используйте .querySelectorAll, чтобы получить все элементы в документе с помощью class="ms-cellstyle", затем используйте метод .forEach (), чтобы вызвать предоставленную функцию один раз для каждого элемента в массиве 

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

Ссылка: .querySelectorAll .forEach ()

0 голосов
/ 07 сентября 2018

Вы можете использовать следующее решение для редактирования текста без class или id: 

$('.ms-cellstyle').each(function() {
   if ($(this).text()=="Administration")
   $(this).text("Category - Administration");
});
0 голосов
/ 07 сентября 2018

Используйте 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>

if 1document.qurySelectorAll is not supported then use document.getElementsByTagName`

0 голосов
/ 07 сентября 2018

Вы можете сделать это, сравнив текстовое содержимое ячеек. Конечно, это подвержено ошибкам, и если текст будет немного отличаться, он сломается. Но если другого пути нет, пример ниже должен помочь вам. 

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>
0 голосов
/ 07 сентября 2018

если это всегда третье td, вы можете использовать обычный css td:eq(3){/*style here*/}, в противном случае вы можете использовать javascript, есть также полезная функция jQuery - https://api.jquery.com/contains-selector/

...