Автоматически добавлять css класса div в функцию javascript

Я не совсем уверен, что понимаю вопрос, но из того, что я прочитал, вы хотите отобразить зеленый кружок, если у пользователя статус = 1. И вы получаете эту информацию из файла json.

Сначала вам нужно создать круги в CSS!

CSS:

.online {
  height: 25px;
  width: 25px;
  background:green;
  border-radius: 50%;
  border: 1px solid;
  display: inline-block;
}
.offline {
  height: 25px;
  width: 25px;
  background:red;
  border-radius: 50%;
  border: 1px solid;
  display: inline-block;
}

Затем, когда вы создаете новую строку, у вас есть класс «онлайн» для нужного столбца:

 $.each(data.data, function(key, value){
  if (value.status == "1")
  {
    thinker_data += '<tr>';
    thinker_data += '<td>'+value.name+'</td>';
    thinker_data += '<td>'+value.mac+'</td>';
    thinker_data += '<td class = "online"></td>';
    thinker_data += '<td></td>' //to make the "Indicator" column space
    thinker_data += '<td> <input type = "button" value = "Click Here" onclick = "window.open(\'RoutineDetails.php\',\'popUpWindow\',\'height=500,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes\');"></td><td> <input type = "button" value = "Click Here" onclick = "window.open(\'DeviceDetails.php\',\'popUpWindow\',\'height=500,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes\');"></td>'
    thinker_data += '</tr>';   
  }

 });

Обратите внимание, что я создал пример ввода, потому что у меня нет доступа к файлу «test.json».

Проверьте JSFiddle для рабочего примера.

Если вам также не нужен красный кружок для статуса = 0, используйте офлайн-класс!

$(document).ready(function() {

  var thinker_data = '';
  let data = {
    "data": [{
      "name": "text",
      "mac": "SOMETHIN5239321",
      "status": "1"
    }, {
      "name": "tex2t",
      "mac": "S23THIN5239321",
      "status": "1"
    }]
  };
  $.each(data.data, function(key, value) {
    if (value.status == "1") {
      thinker_data += '<tr>';
      thinker_data += '<td>' + value.name + '</td>';
      thinker_data += '<td>' + value.mac + '</td>';
      thinker_data += '<td class = "online"></td>';
      thinker_data += '<td></td>' //to make the "Indicator" column space
      thinker_data += '<td> <input type = "button" value=\Click Here" onclick = "window.open(\'RoutineDetails.php\',\'popUpWindow\',\'height=500,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes\');"></td><td> <input type = "button" value = "Click Here" onclick = "window.open(\'DeviceDetails.php\',\'popUpWindow\',\'height=500,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes\');"></td>';
      thinker_data += '</tr>';
    }

  });
  $('#thinker_table').append(thinker_data);
});

.online {
  height: 25px;
  width: 25px;
  background: green;
  border-radius: 50%;
  border: 1px solid;
  display: inline-block;
}

.offline {
  height: 25px;
  width: 25px;
  background: red;
  border-radius: 50%;
  border: 1px solid;
  display: inline-block;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class = "col-md-8">
  <table class = "table table-bordered table striped " id = "thinker_table">
    <thead class = "thead-dark">
      <tr>
        <th>Thinker Name</th>
        <th>MAC Address</th>
        <th>Status</th>
        <th>Indicator</th>
        <th>Show Routines</th>
        <th>Show Devices</th>


      </tr>
    </thead>
    <td>IPLConference Room</td>
    <td>XXXXXXXXXXXXX</td>
    <td>Online</td>
    <td>
      <div class = "led-green"></div>
      <td> <input type = "button" value = "Click Here" onclick = "window.open('RoutineDetails.php','popUpWindow','height=500,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');"></td>
      <td> <input type = "button" value = "Click Here" onclick = "window.open('DeviceDetails.php','popUpWindow','height=500,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');"></td>
      <tr>
        <td>Host_34F60E </td>
        <td>XXXXXXXXXX</td>
        <td>Offline</td>
        <td>
          <div class = "led-red"></div>

        </td>

        <tfoot>
          <tr>
            <th>Thinker Name</th>
            <th>MAC Address</th>
            <th>Status</th>
        </tfoot>
  </table>
</div>

Обновлено: Я отредактировал код и фрагмент, чтобы повторять ваши кнопки в каждом столбце. Я думаю, что это не лучшее решение, но вы не очень ясно представляете, какова ваша цель/какова ваша среда.

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

Я предпочитаю использовать шаблонные строки при написании html в javascript и просто интерполировать переменные. Выглядит очень чистым

$(document).ready(function(){
  $.getJSON("test.json", function(data){
     var thinker_data = '';
     $.each(data.data, function(key, value){
      if (value.status == "1")
      {
        thinker_data += `
          <tr>
            <td>${value.name}</td>
            <td>${value.mac}</td>
            <td>${value.status}</td>
            <td>
              <button onClick = "location.href='https://www.example.com'">Click Me</button>
            </td>
            <td>/* Or an interpolated url in case it should be dynamic */</td>
            <td>
              <button onClick = "location.href='${interpolatedUrl}'">Click Me</button>
            </td>
          </tr>
        `;
      }

     });
     $('#thinker_table').append(thinker_data);

    }); 
  });

  </script>