自动将 div 类 css 添加到 javascript 函数

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