Заполнение таблицы HTML автоматически из JSON С расширяемыми строками

Итак, я начинаю программист, и я пытаюсь создать динамическую таблицу HTML, которая автоматически заполняется с использованием информации из объекта JSON. Уловка, я также хочу, чтобы эти строки расширялись, когда я нажимаю на них, чтобы показать граф под ним.Заполнение таблицы 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 
     } 
    ];

источник

2015-05-08 Eswizzle

Путь, что ваш ваш Jquery нажмите событие проводной вверх работает только на элементах, существуют в DOM, когда команда получает синтаксический анализ. То, что вам нужно изучить, это перегрузка метода .on(), который заменяет старый метод .delegate().

В принципе, вместо выбора на строках tr ваш основной выбор - это то, что всегда будет на странице. В этом случае вы можете использовать элемент table.

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

источник

2015-05-08 16:14:54 krillgar

Да, это прекрасно работает для щелчка и отображения того, что после него, но как я могу поместить изображение после (или «снизу») каждой строки, если я динамически извлекаю данные? – Eswizzle

Вы можете добавить их так же, как вы динамически создаете строки, когда вы строите эти строки в своей верхней функции в своем вопросе. – krillgar

Большое вам спасибо! – Eswizzle

Меняйте 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});

Вам необходимо ATACH событие существующего объекта (тела в данном случае). Check http://api.jquery.com/on/

источник

2015-05-08 16:15:22

Заполнение таблицы HTML автоматически из JSON С расширяемыми строками

ответ

Смежные вопросы