所以我是一名初学程序员,我正在尝试使用来自JSON对象的信息自动填充动态HTML表。问题是,当我点击它们以显示它下面的图形时,我也希望这些行扩展。
**我可以使用JSON中的信息动态填充表格。
**我可以创建一个具有可扩展和可折叠行的表。
现在我只是不知道如何同时做到这些!它甚至可能吗?请帮忙!!!
这里有代码(我已尝试以我能想到的各种方式将它们组合在一起)。此函数使用来自我的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).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();
});
pic});
以下是代码的其余部分,以防它有用:
<!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
}
];
答案 0 :(得分:1)
将jQuery click事件连接起来的方式仅适用于解析命令时DOM中存在的元素。您需要了解的是.on()方法的重载,它取代了旧方法>>> stats(randomEconEq(100), 100)
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
TypeError: 'NoneType' object is not callable
。
基本上,主要选择不是在.delegate()
行上选择,而是始终在页面上。在这种情况下,您可以使用tr
元素。
table
答案 1 :(得分:1)