Fatal编程技术网
  • javascript/
  • Javascript 使用可扩展行从JSON自动填充HTML表

Javascript 使用可扩展行从JSON自动填充HTML表

javascript jquery html json

Javascript 使用可扩展行从JSON自动填充HTML表,javascript,jquery,html,json,Javascript,Jquery,Html,Json,因此，我是一名初级程序员，我正在尝试创建一个动态HTML表，该表使用JSON对象中的信息自动填充。问题是，当我单击这些行以在其下方显示图形时，我还希望这些行展开 **我可以用JSON中的信息动态地填充表 **我可以制作一张有可展开行和可折叠行的表格 现在我只是不知道如何同时做这些！！！有可能吗？？请帮忙 下面是我得到的代码（我试着用我能想到的各种方式把它们结合起来）。此函数使用my JSON中的信息动态填充表 $(function() { $.each(theBlob, f

因此，我是一名初级程序员，我正在尝试创建一个动态HTML表，该表使用JSON对象中的信息自动填充。问题是，当我单击这些行以在其下方显示图形时，我还希望这些行展开

**我可以用JSON中的信息动态地填充表

**我可以制作一张有可展开行和可折叠行的表格

现在我只是不知道如何同时做这些！！！有可能吗？？请帮忙

下面是我得到的代码（我试着用我能想到的各种方式把它们结合起来）。此函数使用my JSON中的信息动态填充表

    $(function() {
       $.each(theBlob, function(i, item) {
          var $tr = $('<tr>').append(
          $('<td>').text(item.timestamp),
          $('<td>').text(item.workload_run),
          $('<td>').text(item.val),
          $('<td>').text(item.target)).appendTo('#reportTable');
       });
    });


下面是代码的其余部分，以防有所帮助：

        <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<style>
  table {
    border-collapse: collapse;
    width: 100%
  }

  table, td, th {
    border: 1px solid black;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  }

  p {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  }

  th {
    text-align: center;
    vertical-align: center;
  }

  tr {
    text-align: center;
    vertical-align: center;
  }

  #header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
  }

  #footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;

  }

  .footer, .push {
    height: .1em;
  }

  img {
    width:150px;
    height:100px;
  }

</style>
</head>

<body onLoad = "buildHtmlTable()">
<div id="header">
  <h1>Production Active Monitoring Report for </h1><h1 id="date1"></h1>
</div>
<br>

<!-- ********************************************************* -->
<!--BELOW THIS COMMENT ARE THE ROWS THAT EXPAND WHEN CLICKED ON-->
<!--********************************************************* -->    
<table>
  <tr>
    <th>Endpoint</th>
    <th>Average</th>
    <th>50th Percentile</th>    
    <th>90th Percentile</th>
    <th>Daily 90th Min </th>
    <th>Daily 90th Max </th>
  </tr>
  <tr class="clickable">
    <td colspan="1">Booklet:Campaign</td> <!-- Endpoint -->
    <td>3.06</td> <!-- Average -->    
    <td>3.00</td> <!-- 50th Percentile -->
    <td>4.11</td> <!-- 90th Percentile -->
    <td>3.63</td> <!-- Minimum -->
    <td>10.76</td>  <!-- Maximum -->  
  </tr>

  <tr>
    <td>
      <img src="graphExample.jpg" alt="Daily 90th percentile view">
    </td>
  </tr>

  <tr class="clickable">
    <td>Booklet:RootPerson</td> <!-- Endpoint -->
    <td>4.26</td> <!-- Average -->    
    <td>4.12</td> <!-- 50th Percentile -->
    <td>6.11</td> <!-- 90th Percentile -->    
    <td>4.68</td> <!-- Minimum -->
    <td>13.71</td>  <!-- Maximum -->
  </tr>

  <tr>
    <td>
      <img src="graphExample.jpg" alt="Daily 90th percentile view">
    </td>
  </tr>

  <tr class="clickable">
    <td>Booklet:Temple</td> <!-- Endpoint -->
    <td>4.94</td> <!-- Average -->
    <td>4.62</td> <!-- 50th Percentile -->
    <td>8.05</td> <!-- 90th Percentile -->
    <td>7.44</td> <!-- Minimum -->
    <td>15.58</td>  <!-- Maximum -->
  </tr>

  <tr>
    <td>
      <img src="graphExample.jpg" alt="Daily 90th percentile view">
    </td>
  </tr>
</table>

<!--********************************************************* --> 
<!--BENEATH THIS IS THE TABLE CALL FOR AN AUTOMATIC TABLE-->
<!--********************************************************* --> 
<table id="reportTable">
<th>Timestamp</th>
<th>Workload_run</th>
<th>Val</th>
<th>Target</th>
</table>

<div class="wrapper"></div>
<br>
<div id="footer" class="footer"></div>

<script>

/**************************************************************************
***************************************************************************
            A function that dynamically pulls data from JSON.
***************************************************************************
**************************************************************************/
$(function() {
    $.each(theBlob, function(i, item) {
        var $tr = $('<tr>').append(
            $('<td>').text(item.timestamp),
            $('<td>').text(item.workload_run),
            $('<td>').text(item.val),
            $('<td>').text(item.target)).appendTo('#reportTable');
       //document.getElementById('test1').innerHTML = ($tr.wrap('<p>').html());
    });
});


/**************************************************************************
***************************************************************************
            THIS DOES THE DATE THAT APPEARS IN THE HEADER.
***************************************************************************
**************************************************************************/
var date = new Date();
var month = date.getMonth();
month = month + 1;
var year = date.getFullYear();
var day = date.getDate();

var dayStamp = month + " / " + day + " / " + year;
document.getElementById("date1").innerHTML = dayStamp;


/**************************************************************************
***************************************************************************
THIS FUNCTION IS WHAT MAKES THE GRAPHS APPEAR AND START OUT NOT DISPLAYED.
***************************************************************************
**************************************************************************/
  $(document).ready(function() {
    $('.clickable').click(function () {
      $(this).nextAll('tr').each( function() {
        if($(this).is('.clickable')) {
          return false;
        }
        $(this).toggle();
      });
    });

    $('.clickable').nextAll('tr').each( function() {
      if(!($(this).is('.clickable')))
      $(this).hide();
    });
  });


/**************************************************************************
***************************************************************************
                SMALL JSON THAT I HAVE BEEN PRACTICING WITH.
***************************************************************************
**************************************************************************/
var theBlob =  [
        {
            "timestamp": "2015-04-24T20: 51: 09+00: 00",
            "workload_run": 100266,
            "val": 4.307,
            "target": null
        },
        {
            "timestamp": "2015-04-24T21: 15: 13+00: 00",
            "workload_run": 100272,
            "val": 4.478,
            "target": null
        },
        {
            "timestamp": "2015-04-24T21: 30: 13+00: 00",
            "workload_run": 100276,
            "val": 3.667,
            "target": null
        },
        {
            "timestamp": "2015-04-25T11: 15: 12+00: 00",
            "workload_run": 100469,
            "val": 2.558,
            "target": null
        },
        {
            "timestamp": "2015-04-25T11: 30: 12+00: 00",
            "workload_run": 100473,
            "val": 2.73,
            "target": null
        },
        {
            "timestamp": "2015-04-25T11: 45: 11+00: 00",
            "workload_run": 100477,
            "val": 2.605,
            "target": null
        }
    ];


桌子{
边界塌陷：塌陷；
宽度：100%
}
表，td，th{
边框：1px纯黑；
字体系列：“投石机MS”，Arial，Helvetica，无衬线；
}
p{
字体系列：“投石机MS”，Arial，Helvetica，无衬线；
}
th{
文本对齐：居中；
垂直对齐：居中；
}
tr{
文本对齐：居中；
垂直对齐：居中；
}
#标题{
背景色：黑色；
颜色：白色；
文本对齐：居中；
填充物：5px；
}
#页脚{
背景色：黑色；
颜色：白色；
明确：两者皆有；
文本对齐：居中；
填充物：5px；
}
.footer、.push{
高度：.1米；
}
img{
宽度：150px；
高度：100px；
}
生产活动监控报告


端点
平均值
第50百分位
第90百分位
每日第90分钟
每日最多90次
小册子：运动
3.06
3
4.11
3.63
10.76
小册子：RootPerson
4.26
4.12
6.11
4.68
13.71
小册子：庙宇
4.94
4.62
8.05
7.44
15.58
时间戳
运行时的工作量
瓦尔
目标


/**************************************************************************
***************************************************************************
从JSON动态提取数据的函数。
***************************************************************************
**************************************************************************/
$（函数（）{
$.each（blob，函数（i，项）{
var$tr=$（''）。追加(
$（''）.text（项.时间戳），
$（''）.text（item.workload\u run），
$（''）.text（item.val），
$（''）.text（item.target））.appendTo（'#reportTable'）；
//document.getElementById（'test1'）.innerHTML=（$tr.wrap（''））.html（））；
});
});
/**************************************************************************
***************************************************************************
这不显示标题中显示的日期。
***************************************************************************
**************************************************************************/
变量日期=新日期（）；
var month=date.getMonth（）；
月=月+1；
var year=date.getFullYear（）；
var day=date.getDate（）；
var dayStamp=月+“/”+日+“/”+年；
document.getElementById（“date1”）.innerHTML=dayStamp；
/**************************************************************************
***************************************************************************
此功能使图形显示，而开始时不显示。
***************************************************************************
**************************************************************************/
$（文档）.ready（函数（）{
$（'.clickable'）。单击（函数（）{
$（this）.nextAll（'tr'）.each（function（）{
如果（$（this）.is（'.clickable'））{
返回false；
}
$（this.toggle（）；
});
});
$（'.clickable'）.nextAll（'tr'）.each（function（）{
如果（！（$（this）.is（'.clickable'））
$（this.hide（）；
});
});
/**************************************************************************
***************************************************************************
我一直在练习的小JSON。
***************************************************************************
**************************************************************************/
var theBlob=[
{
“时间戳”：“2015-04-24T20:51:09+00:00”，
“工作负载运行”：100266，
“val”：4.307，
“目标”：空
},
{
“时间戳”：“2015-04-24T21:15:13+00:00”，
“工作负载运行”：100272，
“val”：4.478，
“目标”：空
},
{
“时间戳”：“2015-04-24T21:30:13+00:00”，
“工作负载运行”：100276，
“val”：3.667，
“目标”：空
},
{
“时间戳”：“2015-04-25T11:15:12+00:00”，
“工作负载运行”：100469，
“val”：2.558，
“目标”：空
},
{
“时间戳”：“2015-04-25T11:30:12+00:00”，
“工作负载运行”：100473，
“val”：2.73，
“目标”：空
},
{
“时间戳”：“2015-04-25T11:45:11+00:00”，
“工作负载运行”：100477，
“val”：2.605，
“目标”：空
}
];
将jQuery click事件连接起来的方式仅适用于解析命令时DOM中存在的元素。您需要研究的是替换旧方法
.delegate（）
的方法重载

基本上，与在
tr
行上选择不同，您的主选择将始终显示在页面上。在这种情况下，可以使用
表
元素

$('table').on('click', '.clickable', function () {
    $(this).nextAll('tr').each( function() {
        if($(this).is('.clickable')) {
          return false;
        }
        $(this).toggle();
    });
});
将您的js更改为：

$(document).ready(function() {
        $("body").on (click, '.clickable', function () {
          $(this).nextAll('tr').each( function() {
            if($(this).is('.clickable')) {
              return false;
            }
            $(this).toggle();
         });
      });

      $('.clickable').nextAll('tr').each( function() {
        if(!($(this).is('.clickable')))
        $(this).hide();
      });
    pic});
你需要去看医生 
$(document).ready(function() {
        $("body").on (click, '.clickable', function () {
          $(this).nextAll('tr').each( function() {
            if($(this).is('.clickable')) {
              return false;
            }
            $(this).toggle();
         });
      });

      $('.clickable').nextAll('tr').each( function() {
        if(!($(this).is('.clickable')))
        $(this).hide();
      });
    pic});