所以我是一名初级程序员，我正在尝试制作一个动态 HTML 表格，该表格使用 JSON 对象中的信息自动填充。问题是，我还希望当我单击这些行以在其下方显示图表时展开这些行。
**我可以使用 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
}
];
最佳答案
连接 jQuery 单击事件的方式仅适用于解析命令时 DOM 中存在的元素。您需要检查的是 .on() 的过载。替换旧方法.delegate()的方法。
基本上，您的主要选择不是在 tr 行上进行选择，而是始终位于页面上。在这种情况下，您可以使用 table 元素。
$('table').on('click', '.clickable', function () {
$(this).nextAll('tr').each( function() {
if($(this).is('.clickable')) {
return false;
}
$(this).toggle();
});
});
关于javascript - 使用可扩展行自动从 JSON 填充 HTML 表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30128259/