Question

我正在使用Json Data来填充Html表。我排除

时代码正常

function getAllDepts()
{

但我想插入一个按钮，以便用新的JSON数据填充html表，并刷新表。

但是，我什么都不适合我。

任何建议??

我的Html代码是

＆＃13;

<!DOCTYPE html>
<html>
<head>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
</head>
<body>
<div class="container">
	
<div class="table-responsive">
	<h1>Json</h1>
	<br/>

	<table class="table table-bordered table-striped" id="employee_table">
		<tr>
			<th>Class</th>
			<th>Time</th>
			
		</tr>
	</table>
</div>
</div>
<input id="getAllDepts" type="button" value="Create Table From JSON" />

</body>

</html>

<script>

$(document).ready(function(){
  var employee_data= '';
  if(localStorage.myJSON !== undefined){
    var myJSON = JSON.parse(localStorage.myJSON);
    employee_data += '<tbody>';
    $.each(myJSON, function(key, value){
      employee_data += '<tr>';
      employee_data += '<td>'+value.class+'</td>';
      employee_data += '<td>'+value.time+'</td>';

      employee_data += '</tr>';
    });
    employee_data += '</tbody>';
    $('#employee_table').append(employee_data);
  }

  employee_data= '';  // empty employee_data


$('#getAllDepts').click(function() {
  $.getJSON("https://api.myjson.com/bins/8qktd", function(data){
      $("#yourtableid tbody").remove();    // Empty table before filling it with new data

      localStorage.setItem(myJSON, JSON.stringify(data)); // Save new data in localStorage
      $.each(data, function(key, value){
        employee_data += '<tr>';
        employee_data += '<td>'+value.class+'</td>';
        employee_data += '<td>'+value.time+'</td>';

        employee_data += '</tr>';
      });
      $('#employee_table').append(employee_data);
  });
})
</script>

＆＃13;

和我面临的另一个问题是当它处于脱机状态时[[当然当我从那里删除函数getAllDepts（）{）时，它运行良好]，在那种情况下它只用json数据填充表当在线和离线时，它不再起作用，只显示列标题。

我的json数据是

＆＃13;

[

    {
    "id":"1",    
    "time":"10-15",
    "class":"John Smith"
    
},
{


    "id":"2",
   "time":"10-15",
    "class":"John Smith"
},

{

    "id":"3",
   "time":"10-15",
    "class":"John Smith"
},

{
    "id":"4",
    "time":"10-15",
    "class":"John Smith"
},
{


    "id":"5",
   "time":"10-15",
    "class":"John Smith"
},

{

    "id":"6",
   "time":"10-15",
    "class":"John Smith"
},

{
    "id":"7",
  "time":"10-15",
    "class":"John Smith"
},
{


    "id":"8",
   "time":"10-15",
    "class":"John Smith"
},

{

    "id":"9",
   "time":"10-15",
    "class":"John Smith"
},

{
    "id":"10",
    "time":"10-15",
    "class":"John Smith"
},
{


    "id":"11",
    "time":"10-15",
    "class":"John Smith"
},

{

    "id":"12",
    "time":"10-15",
    "class":"John Smith"
}

]

＆＃13;

Answer 1

你可以这样做：

使用单击侦听器包装getJSON函数。这是您重写的脚本标记：

<script>
$(document).ready(function() {
  var employee_data= '';

  if(localStorage.myJSON !== undefined){
    var myJSON = JSON.parse(localStorage.myJSON);
    employee_data += '<tbody>';
    $.each(myJSON, function(key, value){
      employee_data += '<tr>';
      employee_data += '<td>'+value.class+'</td>';
      employee_data += '<td>'+value.time+'</td>';

      employee_data += '</tr>';
    });
    employee_data += '</tbody>';
    $('#employee_table').append(employee_data);
  }

  employee_data= '';  // empty employee_data

  $('#getAllDepts').click(function() {
    $.getJSON("https://api.myjson.com/bins/8qktd", function(data){
        $("#yourtableid tbody").remove();    // Empty table before filling it with new data

        localStorage.setItem(myJSON, JSON.stringify(data)); // Save new data in localStorage
        $.each(data, function(key, value){
          employee_data += '<tr>';
          employee_data += '<td>'+value.class+'</td>';
          employee_data += '<td>'+value.time+'</td>';

          employee_data += '</tr>';
        });
        $('#employee_table').append(employee_data);
    });
  })

});
</script>

只需在HTML元素的input元素中添加一个id，如下所示：

<input id="getAllDepts" type="button" value="Create Table From JSON" />

当您离线时，您的函数不会返回任何数据，因为您正在向互联网上托管的URL发出AJAX请求。如果要脱机使用，请尝试在本地计算机上创建模拟JSON文件。

离线测试的一种简单方法是使用您想要的任何数据创建自己的json文件。例如：您可以创建一个名为test.json的文件，并使用您自己的有效JSON数据填充它。

只需将您的ajax请求更改为指向本地文件，而不是互联网上的网址。你可以随时交换它们。快速举例：

$.getJSON("data.json", function(data){

不确定你的目录结构是什么样的，但你可能不得不搞乱json文件的路径。

如何实现OnClick事件来调用$ .getJSON函数

1 个答案: