Javascript 两个不同的表，包含两个不同的AJAX JSON响应数据

我不熟悉

javascript

我需要从两个不同的

AJAX

请求获取

JSON

响应，并创建两个不同的表

我已经为1个JSON响应和1个表实现了它

HTML:

<div style="width:700px;padding:20px;S">
                    <table id="host_table" class="table">
                        <tr>
                            <th>Server Name</th>
                            <th>Availability %</th>
                        </tr>
                    </table>
</div>

---

如何完成我的任务？

像这样并排做桌子 这是另一个问题，但是 用于第一个表

style=“显示：内联块；”

第二桌呢

style=“float:left；”>

---

这就是它如何为您的理解工作，可以制作更动态的解决方案

像这样并排制作表格 这是另一个问题，但是 用于第一个表

style=“显示：内联块；”

第二桌呢

style=“float:left；”>

---

这就是它的工作原理，对于您的理解，可以制定更动态的解决方案

您是否可以将示例表与示例数据共享您是否从同一ajaxFirst put debug中获取这两个表的数据这一行

$（“tr:has（td）”）.remove（）然后检查第一次调用的响应以及为什么不起作用。如果它给出了错误，那么请提及错误消息以及问题中两个调用的响应。@AhmedSunny我需要使用2 ajax来表示2tables@AhmedSunny它是有效的：）。一个小查询，表显示一个在另一个下面。我希望它能够并排显示。您能否将示例表与示例数据共享？您是否从同一ajaxFirst put debug中获取这两个表的数据，请在这一行
$（“tr:has（td）”）。remove（）然后检查第一次调用的响应以及为什么不起作用。如果它给出了错误，那么请提及错误消息以及问题中两个调用的响应。@AhmedSunny我需要使用2 ajax来表示2tables@AhmedSunny它是有效的：）。一个小查询，表显示一个在另一个下面。我希望它并排显示仍然我的表列表一个在另一个下面onlyremove类inlinetable从两者中都可以删除，我认为这是您的自定义类可能会有问题很好您发现了它感谢及时的支持仍然我的表列表一个在另一个下面onlyremove类inlinetable从两者中都可以删除，我认为这是您的自定义类，可能是个问题。很好，您找到了它。感谢您的及时支持
$(function() {

    // kick off with fetchdata
     fetchData();
//   fetchServiceData();
});
function make_base_auth(user, password) {
            var tok = user + ':' + password;
            var hash = btoa(tok);
            return 'Basic ' + hash;
}

function fetchData() {
  var time = new Date();
  var end =  Math.floor((new Date).getTime()/1000);
  //var end = ~~(Date.now() /1000) ;
  var start = Math.floor(time.setDate(time.getDate() - 1)/1000);
  Availreport = "http://xx.xx.xx.xx/nagios/cgi-bin/archivejson.cgi?query=availability&availabilityobjecttype=hostgroups&hostgroup=ALM&assumedinitialhoststate=up&assumedinitialservicestate=ok&starttime=" + start + "&endtime=" + end;

 $.ajax({
 type: "GET",
 url: Availreport,
 beforeSend: function (xhr) {
                        xhr.setRequestHeader('Authorization',
                        make_base_auth("nagiosadmin", "nagiosadmin"));
                },

 dataType: 'json',     //data format
 //async: false,
 //success: onOutboundReceived      //on receive of reply
 timeout: 0,
 success: availshow 

 });

  function availshow(series) {

  // 1. remove all existing rows
    $("tr:has(td)").remove();

    $.each(series.data.hostgroup.hosts, function (index, test) {  
  $('<tr>').append(
            $('<td>').text(test.name),
            $('<td>').text(parseInt(((test.time_up - test.time_down)/test.time_up)*100)),
        ).appendTo('#host_table');          
    });

    $('#host_table tr').each(function() {
  var $td = $(this).find('td:eq(1)');
  var value = $td.text();
  if (parseInt(value) < 100) {
    $td.css('background-color', 'red');
        }
    });

}

            <table id="host_table" class="inlinetable" style="display: inline-block;">
                <tr>
                    <th>Server Name</th>
                    <th>Availability %</th>
                </tr>
            </table>

            <table id="service_table" class="inlinetable" style="display: inline-block;">
                <tr>
                    <th>Service Name</th>
                    <th>Availability %</th>
                </tr>
            </table>

   <table id="host_table" class="inlinetable" style="display: inline-block;">
        <thead>
          <tr>
            <th>Server Name</th>
            <th>Availability %</th>
          </tr>
        </thead>
        <tbody></tbody>
    </table>

    <table id="service_table" class="inlinetable" style="float: left;">
        <thead>
          <tr>
            <th>Service Name</th>
            <th>Availability %</th>
          </tr>
        </thead>
        <tbody></tbody>
    </table>

$(function() {

// kick off with fetchdata
//   service_table();
service_table();
//   host table();
fetchData2();

});


function service_table() {

 $.ajax({
 type: "GET",
 url: Availreport,
 beforeSend: function (xhr) {
          xhr.setRequestHeader('Authorization',
          make_base_auth("nagiosadmin", "nagiosadmin"));
     },
 dataType: 'json',
 timeout: 0,
 success:function(series) {

   $('#service_table tbody').empty();
     // your row loop code
  }

 });
function service_table() {

 $.ajax({
 type: "GET",
 url: Availreport,
 beforeSend: function (xhr) {
          xhr.setRequestHeader('Authorization',
          make_base_auth("nagiosadmin", "nagiosadmin"));
     },
 dataType: 'json',
 timeout: 0,
 success:function(series) {

   $('#host_table tbody').empty();
       // your row loop code
  }

 });


}