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

我正在使用Json数据来填充Html表。当我排除时，代码运行良好

function getAllDepts()
{

但是我想插入一个按钮，以便在可用的情况下用新的JSON数据填充html表并刷新表

但是，我什么都不适合我

有什么建议吗

我的Html代码是

Json


等级
时间
$（文档）.ready（函数（）{
var员工_数据=“”；
if（localStorage.myJSON！==未定义）{
var myJSON=JSON.parse（localStorage.myJSON）；
员工_数据+=''；
$.each（myJSON，函数（键，值）{
员工_数据+=''；
员工_数据+=''+值.class+''；
员工_数据+=''+值.时间+''；
员工_数据+=''；
});
员工_数据+=''；
$（'employee_table'）。追加（employee_数据）；
}
employee\u data=''；//空的employee\u数据
$（'#getAllDepts'）。单击（函数（）{
$.getJSON（“https://api.myjson.com/bins/8qktd，函数（数据）{
$（“#yourtableid tbody”）.remove（）；//在用新数据填充表之前清空表
localStorage.setItem（myJSON，JSON.stringify（data））；//在localStorage中保存新数据
$。每个（数据、函数（键、值）{
员工_数据+=''；
员工_数据+=''+值.class+''；
员工_数据+=''+值.时间+''；
员工_数据+=''；
});
$（'employee_table'）。追加（employee_数据）；
});
})

您可以这样做：

使用click listener包装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>

---

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

是否将该脚本标记放入HTML页面？您的HTML示例没有显示这一点。

getAllDepts（）

函数位于封闭范围内，在页面级别不可见。浏览器的开发控制台可能会告诉您这一点。既然您仍在使用jQuery，请使用jQuery。不要使用内联的

onclick

属性，而是使用jQuery攻击单击处理程序。编辑了标题，但第一句没有解释具体问题clearly@BlueYeti24：然后从更简单的内容开始。jQuery文档和教程旨在为您提供帮助。由于您试图在单击按钮时实现某些功能，因此只需尝试响应按钮的单击即可开始。这里还有更多解释：以及其他许多地方。不要尝试实现不是所有你想要的东西都能一次完成。当某些东西不起作用时，你将不知道哪一块坏了。让每一块都能一次完成。更好。但是“没有什么对我起作用”没有告诉我们你尝试了什么。不幸的是，写一个好的问题需要一点努力，首先要清楚地解释问题，展示你尝试了什么，并找出错误。我不是想否定你，而是想通过在我实施你的计划时非常清楚你的问题到底是什么来指导你更有效地使用网站方法时，它会抛出一个错误，即控制台中的输入意外结束…但是当我删除第一行$（“#getAllDepts”）时。单击（function（）{，它工作正常。你能发布所有HTML文件，而不分离JS文件吗？你可能在某个地方粘贴了错误的内容。是的，现在我用抛出错误的代码编辑了上面的问题。试试我新更新的答案。只需像我一样粘贴它。是的，你的代码缺少结尾}）对于顶级document.ready函数。我的更新答案将适用于您。请使用它而不是代码。

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

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