Mam twarde dwie wartości, które wyświetlają zieloną ikonę na tym, który ma status online i czerwoną ikonę na tym, który jest offline. Teraz chcę, aby automatycznie dodać zieloną ikonę w tabeli, gdy nazywa się moja funkcja.

<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>
                </thead>


              </tr>
                <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>

</div>

</div>

To mój javascript poniżej, wyświetlając wynik w tabeli. Tabela powinna wyświetlać zieloną ikonę, w której status = 1. Jak mój stan jest status = 1 dlatego powinienem uzyskać zieloną ikonę na całym rzędzie tabeli.

$(document).ready(function(){
  $.getJSON("test.json", function(data){
     var thinker_data = '';
     $.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>'+value.status+ '</td>';
        thinker_data += '</tr>';   
      }

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

    }); 
  });

  </script>

Odpowiedź była pomocna, ale teraz dostaję taką ikonę Ikony nie są wyśrodkowane

Jak również dodać dwa przyciski również w tabeli?

0
arslaanmalik 25 luty 2019, 13:34

2 odpowiedzi

Najlepsza odpowiedź

Nie jestem pewien, że rozumiem pytanie, ale z tego, co czytałem, chcesz wyświetlić zielony koło, jeśli użytkownik ma status = 1. I otrzymujesz te informacje z pliku JSON.

Cóż, musisz najpierw stworzyć kręgi w 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;
}

Następnie podczas tworzenia nowego wiersza miałeś klasę "online" do kolumny, którą chcesz:

 $.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>';   
  }

 });

Uwaga Utworzono wkład próbek, ponieważ nie mam dostępu do pliku "test.json".

Sprawdź JSFiddle dla przykładu roboczego.

Jeśli nie ma też czerwonego okręgu dla statusu = 0, użyj klasy offline!

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

Edytuj: Edytowałem kod i fragment, aby powtórzyć przyciski w każdej kolumnie. Myślę, że to nie jest najlepsze rozwiązanie, ale nie jesteś bardzo jasny, co jest twoim celem / co jest twoim programem.

0
H. Figueiredo 25 luty 2019, 12:24

Nie jestem całkowicie podążaj za łańcuchem wydarzeń w tym pytaniu, a gdzie jesteś teraz, ale z tego, co zbieram, chcesz wiedzieć, jak można dodać przyciski do stołu z poprawną funkcją wywołuje ONClick?

Wolę używać łańcuchów szablonów podczas pisania HTML w JavaScript i tylko zmienne interpolujące. Wygląda bardzo czysty

$(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>
-1
Drowsy 25 luty 2019, 12:59