个人中心
gpt4 book ai didi

javascript - 使用可扩展行自动从 JSON 填充 HTML 表格

转载 作者：行者123 更新时间：2023-12-02 16:11:31 25 4
gpt4 key购买 nike

所以我是一名初级程序员，我正在尝试制作一个动态 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/

25 4 0
文章推荐： android - 为什么 Kotlin 的 mutableListOf() 返回空值
文章推荐： linux - qemu-system-arm -redir 无效选项
文章推荐： python - Pandas :用相同重复名称/键组的第一个值填充空值
文章推荐： sql-server - 如何通过 BIDS 将新的维度属性添加到现有维度
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com