Замените имя класса после ajax вызова

Question

Я пытаюсь заменить имя класса после загрузки ajax (обновлено в таблицу), когда я сделал консольный журнал для моего кода для

$( document ).ajaxComplete(function(e, xhr, settings) {
        var x = document.getElementsByTagName("tbody");
          console.log(x)
 });

, он напечатает это, я могу получить доступ к тегу, щелкнув по нему, и увидеть, что на моем веб-сайте выбрано имя c Каждый раз после вызова ajax будет обновляться sh таблица, но не страница.

HTMLCollection(12) [tbody, tbody, tbody.linked-visual-table, tbody, tbody, tbody, tbody, tbody, tbody, tbody, tbody, tbody]
length: 12
0: tbody
1: tbody
2: tbody.linked-visual-table
3: tbody
rows: HTMLCollection(27) [tr.viz-tr-header, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr]
align: ""
ch: ""
chOff: ""
vAlign: ""
title: ""
lang: ""
translate: true

я попытался это записать в журнал xhr, и это то, что он возвращает

{url: "/arc/sqlrun/jsonselect_parallel", type: "POST", isLocal: false, global: true, processData: true, …}
url: "/arc/sqlrun/jsonselect_parallel"
type: "POST"
isLocal: false
global: true
processData: true
async: true

, когда я попытался выбрать конкретный c индекс в моей коллекции html, и я сделал console.log(x[3])

оно будет напечатано, но когда я щелкаю по тегу, который был напечатан в моем журнале консоли, он ничего не подсвечивает в моем браузере, я полагал, что все dom заменяется. я пытаюсь достичь

$( document ).ajaxComplete(function(e, xhr, settings) {
        var x = document.getElementsByTagName("tbody");
          console.log(x)
        //Find td that has string of 'go' and add class green
        //Find td that has string of 'Stop' and add class red 
 });

Я пытался решить эту проблему в течение нескольких дней, но я чувствую, что упускаю какой-то шаг. каждый раз, когда в таблицу загружаются новые данные, он удаляет присвоенное имя класса

Я пробовал выбор запросов и индексацию массива, все возвращенные узлы не могут быть найдены на текущей странице.

update

Я реализовал решение @manikant gautam, оно добавляется почти ко всем, кроме пропуска к тому, к которому мне нужно добавить класс.

$( document ).ajaxComplete(function(e, xhr, settings) {
        var x = document.getElementsByTagName("tbody");
        //var x = document.querySelectorAll("tbody");
         console.log(x)
         addClasses();
      });

    function addClasses(){
        var x = document.getElementsByTagName("tbody")
         for (var i=0; i<x.length; i++){
              x[i].className += " custom";
         }

в моей консоли Похоже, что в журнале избегают добавления любого пользовательского класса к указанному тегу c, но почему?

HTMLCollection(12) [tbody, tbody, tbody.linked-visual-table, tbody, tbody, tbody, tbody, tbody, tbody, tbody, tbody, tbody]
length: 12
0: tbody..custom
1: tbody..custom
2: tbody.linked-visual-table.custom
3: tbody
4: tbody..custom
5: tbody..custom
6: tbody..custom
7: tbody..custom
8: tbody..custom
9: tbody..custom
10: tbody..custom
11: tbody..custom
__proto__: HTMLCollection

только в индексе 3 имеют значения, все индексы в tbody, кроме 3, которые имеет присвоение имени класса вообще не имеет значений. Означает ли это, что он автоматически создает новый div после того, как он refre sh на ajax?

HTMLCollection(12) [tbody, tbody, tbody.linked-visual-table, tbody, tbody, tbody, tbody, tbody, tbody, tbody, tbody, tbody]
length: 12
0: tbody..custom
1: tbody..custom
2: tbody.linked-visual-table.custom
3: tbody
rows: HTMLCollection(19)
length: 19
0: tr.viz-tr-header
1: tr
2: tr
3: tr

Answer 1

.addClass('Green') Вы должны подать заявку после соответствия условию.

  $( document ).ajaxComplete(function(e, xhr, settings) {
    var x = document.getElementsByTagName("tbody");
      console.log(x)
    //Find td that has string of 'go' and add class green
    //Find td that has string of 'Stop' and add class red 
    addClasses();
   });
    function addClasses(){
        var t = document.getElementById("table");
        var trs = t.getElementsByTagName("tr");
        var tds = null;

       for (var i=0; i<trs.length; i++){
            tds = trs[i].getElementsByTagName("td");
                  for (var n=0; n<tds.length;n++) {
               if(tds[n].innerHTML.contains("Go")){
                 $(tds[n]).addClass('Green');
               }
               if(tds[n].innerHTML.contains("Stop")){
                 $(tds[n]).addClass('Red');
               }
          }
        }
    }

Answer 2

Попробуйте это.

$( document ).ajaxComplete(function(e, xhr, settings) {
  var x = document.querySelector("tbody");
  let td = x.querySelectorAll('td');
  td.forEach( item => {
    if(item.textContent.includes('go')){ // or can be more specific with `===`
      item.classList.add('green');
    } else if(item.textContent.includes('Stop')) {
      item.classList.add('red');
    }
  });
});

Пример

(function() {
    var x = document.querySelector("tbody");
    let td = x.querySelectorAll("td");
    td.forEach(item => {
      if (item.textContent === "go") {
        item.classList.add("green");
      } else if (item.textContent === "Stop") {
        item.classList.add("red");
      }
    });
})();

.green {
        background-color: green;
      }

      .red {
        background-color: red;
      }

    <table>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>go</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr>
        <td>Stop</td>
        <td>go</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>go</td>
      </tr>
      <tr>
        <td>Stop</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </table>