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

gezer4000

所以我有这段代码使用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文件，但是我对如何在其中实现它迷失了。

来宾271314

不能确定的选项.jPut()，但其中一个方案是将所有tr的元素style来display:none，然后随机选择tr从table，并设置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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。