Question

所以我是一名初学程序员，我正在尝试使用来自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
        }
    ];

Answer 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

Answer 2

将您的js更改为：

SuperSonic UI

您需要将事件传递给现有对象（在本例中为正文）。查看http://api.jquery.com/on/

从JSON自动填充HTML表格可扩展行

2 个答案: