重新加载JavaScript并根据值的变化在表中插入数据

时间：2019-01-30 12:55:45

标签： javascript json 

$(document).ready(function() {
  //faked below $.getJSON("thinker.json", function(data) {
  $.getJSON("https://api.myjson.com/bins/lljpq", function(data) {
    var thinker_data = '';
    $.each(data.data, function(key, value) {
      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);
  });
});
.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;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.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>
    <tbody>
      <tr>
        <td>IPLConference Room</td>
        <td>XXXXXXXXXXXXX</td>
        <td>Online</td>
        <td>
          <div class="led-green"></div>
        </td>
        <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>
      <tr>
        <td>Host_34F60E </td>
        <td>XXXXXXXXXX</td>
        <td>Offline</td>
        <td>
          <div class="led-red"></div>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Thinker Name</th>
        <th>MAC Address</th>
        <th>Status</th>
        <th>Indicator</th>
        <th>Show Routines</th>
        <th>Show Devices</th>
      </tr>
    </tfoot>
  </table>
</div>

当我更改.json文件上的值时，我想自动重新加载此函数并更改表中的值。稍后我想直接调用curl API请求。

<script>

$(document).ready(function(){
  $.getJSON("thinker.json", function(data){
     var thinker_data = '';
     $.each(data.data, function(key, value){
        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>

1 个答案:

答案 0 :(得分：0)

有时.Net使用返回的“数据”，但是为了使其更通用，我们可以嗅一下。

  1. 您的表格HTML格式不正确，我已解决
  2. 您表中的班级有错别字，已解决
  3. 从示例JSON中插入行-我对这里的实际JSON不了解，所以我伪造了
  4. 在顶部添加了一个按钮来模拟事件的触发，但是它是生成的，因此我可以显示事件处理程序。
  5. 显示插入带有列的行，添加类，使用jQuery data()存储并稍后在事件处理程序中使用（您可以将其扩展为其他按钮的另一列，更多可能性...
  6. 展示了如何将元素（如按钮）插入到新行，td等中，仅是示例

$(function() {
  $('.popup-button').on('click', function() {
    let targetWindow = $(this).data("target");
    window.open(targetWindow, 'popUpWindow', 'height=500,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
  });
  $('#updatetable').on('click', function() {
    //faked below $.getJSON("thinker.json", function(data) {
    $.getJSON("https://api.myjson.com/bins/lljpq", function(data) {
      //console.log(data);
      var mydata = (typeof data.data != "undefined" && data.data == null) ? data.data : data;

      var newstuff = $('<tbody></tbody>'); // just to hold stuff
      $.each(mydata.rooms, function(indexInArray, value) {
        // console.log(value.name);
        let tr = $("<tr></tr>");
        tr.append($('<td></td>').html(value.name));
        tr.append($('<td></td>').html(value.mac));
        tr.append($('<td></td>').html(value.status));
        tr.append($('<td>ind</td>'));
        let btn = $("<button type='button'>Routine</button>")
          .addClass('btn btn-sm btn-outline-info')
          .data('target', 'RoutineDetails.php');
        let ntd = $('<td></td>').append(btn);
        tr.append(ntd);
        newstuff.append(tr);
      });
      // append the rows
      let tbody = $('#thinker_table').find('tbody').empty();
      newstuff.find('tr').appendTo(tbody);
    });
  });
});
.button-things {
  margin: 1em;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<div class="col-md-8">
  <div class=".container-fluid button-things"><button id="updatetable" class="btn btn-sm btn-primary">Update trigger</button></div>
  <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>
    <tbody>
      <tr>
        <td>IPLConference Room</td>
        <td>XXXXXXXXXXXXX</td>
        <td>Online</td>
        <td>
          <div class="led-green"></div>
        </td>
        <td> <input type="button" class="btn btn-outline-primary" 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" class="btn btn-outline-primary" 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>
      <tr>
        <td>Host_34F60E </td>
        <td>XXXXXXXXXX</td>
        <td>Offline</td>
        <td>
          <div class="led-red"></div>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Thinker Name</th>
        <th>MAC Address</th>
        <th>Status</th>
        <th>Indicator</th>
        <th>Show Routines</th>
        <th>Show Devices</th>
      </tr>
    </tfoot>
  </table>
</div>

相关问题
最新问题