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

How would I make this only display one result and add a randomize button?

本文关键字：一个 添加 随机 按钮 结果 何使这 显示      更新时间：2023-09-26

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

<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文件，但我失去了如何实现它。

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

根据链接的文档，当返回JSON时，将调用done选项。

<!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

相关文章：