Question

所以我有这个代码，它使用Jput显示适合JSON文件中变量的所有对象。

<script>
$(document).ready(function(){

$("#tbody").jPut({
    ajax_url:"valid_data.json",
    prepend:true, 
    name:"tbody_template",
});

});
</script>  

<table jput="t_template">
 <tbody jput="tbody_template">
     <tr>
         <td>{{First Name}}</td>
         <td>{{Middle Name}}</td>
         <td>{{Last Name}}</td>
         <td>{{Nationality}}</td>
         <td>{{Birthplace}}</td>
         <td>{{Age}}</td>
     </tr>
 </tbody>
</table>

<table>
 <tbody id="tbody">
 </tbody>
</table>

<script src="jquery-1.12.3.min.js"></script>
<script src="jput.min.js"></script>

代码工作正常，（可以在http://fooda.website/test2.html的操作中看到）但我需要一个按钮，当单击时选择一个随机数组并仅显示该数组结果。

Javascript知识很少，所以不确定如何去做。在我被建议转换为JSON之前，有一些先前的代码链接到CSV文件，但是我对如何在此实现它感到迷茫。

Answer 1

不确定.jPut()的选项，但有一个选项是将所有tr元素style设置为display:none，然后从tr中选择随机table {1}}并将tr设置为display:block。

根据链接文档，在返回done时会调用JSON选项。

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="http://fooda.website/jput.min.js"></script>
</head>

<body>
  <script>
    $(document).ready(function() {
      var tr, button = $("button");
      $("#tbody").jPut({
        ajax_url: "http://fooda.website/valid_data.json",
        prepend: true,
        name: "tbody_template",
        done: function(e) {
          tr = $("table #tbody tr").hide();
          button.removeAttr("disabled")
        }
      });

      button.click(function() {
        tr.hide();
        var rand = Math.floor(Math.random() * tr.length);
        tr.eq(rand).show()
      });
    });
  </script>
  <button disabled>click</button>
  <table jput="t_template" style="display: none;">
    <tbody jput="tbody_template" style="display: none;">
      <tr>
        <td>{{First Name}}</td>
        <td>{{Middle Name}}</td>
        <td>{{Last Name}}</td>
        <td>{{Nationality}}</td>
        <td>{{Birthplace}}</td>
        <td>{{Age}}</td>
      </tr>
    </tbody>
  </table>
  <table>
    <tbody id="tbody">
    </tbody>
  </table>
</body>

</html>

plnkr http://plnkr.co/edit/NURw4djMh9Jp23v3bINP?p=preview

我如何只显示一个结果并添加一个随机按钮？

1 个答案: