JSONを使用してデータを取得し、htmlファイルに入力する

Question

「Lorem Ipsum」のすべての項目に正しいデータが入力されるように、「Retrieve data」ボタンをクリックすると、 。周囲温度が別のファイル/場所に記載された温度で満たされるような場合。しかし、私はまだ運がない。

<!-- begin col-6 --> 
    <div class="col-md-6"> 
     <!-- begin panel --> 
     <div class="panel panel-inverse" data-sortable-id="table-basic-1"> 
      <div class="panel-heading"> 
       <div class="panel-heading-btn"> 
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a> 
       </div> 
       <h4 class="panel-title">Default Table</h4> 
      </div> 
      <div class="panel-body"> 
       <table class="table"> 
        <tbody> 
         <tr> 
          <td><b>Status</b></td> 
          <td>Lorem ipsum dolor </td> 
         </tr> 
         <tr> 
          <td><b>Server Update</b></td> 
          <td>Lorem ipsum dolor </td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
     </div> 
     <div class="panel panel-inverse" data-sortable-id="table-basic-1"> 
      <div class="panel-heading"> 
       <div class="panel-heading-btn"> 
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a> 
       </div> 
       <h4 class="panel-title">Default Table</h4> 
      </div> 
      <div class="panel-body"> 
       <table class="table"> 
        <tbody> 
         <tr> 
          <td><b>Signal Strength</b></td> 
          <td>Lorem ipsum dolor </td> 
         </tr> 
         <tr> 
          <td><b>Main Power</b></td> 
          <td>Lorem ipsum dolor </td> 
         </tr> 
         <tr> 
          <td><b>Backup Battery</b></td> 
          <td>Lorem ipsum dolor </td> 
         </tr> 
         <tr> 
          <td><b>Ambient Temperature</b></td> 
          <td>Lorem ipsum dolor </td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
     </div> 
     <!-- end panel --> 
     <div class="col-md-8 col-md-offset-4"> 
       <button type="submit" class="btn btn-sm btn-primary m-r-5">Retrieve Data</button> 
      </div> 
    </div> 

Answer 1

基本的に、DOMを変更する必要がある部分を特定する必要があります。

$(document).ready(function() { 
 
    $("#btn").click(function() { 
 
     $("#fld_status").text("OK"); 
 
     $("#fld_server_update").text("today"); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- begin col-6 --> 
 
    <div class="col-md-6"> 
 
     <!-- begin panel --> 
 
     <div class="panel panel-inverse" data-sortable-id="table-basic-1"> 
 
      <div class="panel-heading"> 
 
       <div class="panel-heading-btn"> 
 
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a> 
 
       </div> 
 
       <h4 class="panel-title">Default Table</h4> 
 
      </div> 
 
      <div class="panel-body"> 
 
       <table class="table"> 
 
        <tbody> 
 
         <tr> 
 
          <td><b>Status</b></td> 
 
          <td id="fld_status">Lorem ipsum dolor </td> 
 
         </tr> 
 
         <tr> 
 
          <td><b>Server Update</b></td> 
 
          <td id="fld_server_update">Lorem ipsum dolor </td> 
 
         </tr> 
 
        </tbody> 
 
       </table> 
 
      </div> 
 
     </div> 
 
     <div class="panel panel-inverse" data-sortable-id="table-basic-1"> 
 
      <div class="panel-heading"> 
 
       <div class="panel-heading-btn"> 
 
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a> 
 
       </div> 
 
       <h4 class="panel-title">Default Table</h4> 
 
      </div> 
 
      <div class="panel-body"> 
 
       <table class="table"> 
 
        <tbody> 
 
         <tr> 
 
          <td><b>Signal Strength</b></td> 
 
          <td>Lorem ipsum dolor </td> 
 
         </tr> 
 
         <tr> 
 
          <td><b>Main Power</b></td> 
 
          <td>Lorem ipsum dolor </td> 
 
         </tr> 
 
         <tr> 
 
          <td><b>Backup Battery</b></td> 
 
          <td>Lorem ipsum dolor </td> 
 
         </tr> 
 
         <tr> 
 
          <td><b>Ambient Temperature</b></td> 
 
          <td>Lorem ipsum dolor </td> 
 
         </tr> 
 
        </tbody> 
 
       </table> 
 
      </div> 
 
     </div> 
 
     <!-- end panel --> 
 
     <div class="col-md-8 col-md-offset-4"> 
 
       <input id="btn" type="submit" class="btn btn-sm btn-primary m-r-5">Retrieve Data</input> 
 
      </div> 
 
    </div>