如何選擇隨機5 TR並顯示給用戶？

其他問題應該隱藏在頁面中並只顯示5個問題。

我的示例代碼，我想當用戶加載頁面看到許多問題中的5個問題。

<form> 
    <table> 
     <tbody> 
      <tr id="Tr0"> 
       <td>Question 1: </td> 
       <td><input type="radio" value="True" /><input type="radio" value="False" /></td> 
      </tr> 
      <tr id="Tr1"> 
       <td>Question 2: </td> 
       <td><input type="radio" value="True" /><input type="radio" value="False" /></td> 
      </tr> 
      <tr id="Tr2"> 
       <td>Question 3: </td> 
       <td><input type="radio" value="True" /><input type="radio" value="False" /></td> 
      </tr> 
      <tr id="Tr3"> 
       <td>Question 4: </td> 
       <td><input type="radio" value="True" /><input type="radio" value="False" /></td> 
      </tr> 
      <tr id="Tr4"> 
       <td>Question 5: </td> 
       <td><input type="radio" value="True" /><input type="radio" value="False" /></td> 
      </tr> 
      <tr id="Tr5"> 
       <td>Question 6: </td> 
       <td><input type="radio" value="True" /><input type="radio" value="False" /></td> 
      </tr> 
      <tr id="Tr6"> 
       <td>Question 7: </td> 
       <td><input type="radio" value="True" /><input type="radio" value="False" /></td> 
      </tr> 
      <tr id="Tr7"> 
       <td>Question 8: </td> 
       <td><input type="radio" value="True" /><input type="radio" value="False" /></td> 
      </tr> 
      <tr id="Tr8"> 
       <td>Question 9: </td> 
       <td><input type="radio" value="True" /><input type="radio" value="False" /></td> 
      </tr> 
      <tr id="Tr9"> 
       <td>Question 10: </td> 
       <td><input type="radio" value="True" /><input type="radio" value="False" /></td> 
      </tr> 
     </tbody> 
    </table> 
</form>

來源

2014-10-30 Arman Feyzi

你試圖從你身邊什麼？ – 2014-10-30 08:45:55

你有什麼嘗試？你的問題到底是什麼？這個平臺不是爲你編寫代碼。 – k0pernikus 2014-10-30 08:46:20

@阿曼：看看我的回答。希望它能幫助你解決你的問題。 – SpiderCode 2014-10-30 09:05:35

使用Math.random()生成隨機數，並將其用於顯示的問題

$('table tr').hide(); 
 
for (var i = 0; i < 5; i++) { 
 
    $('table tr').filter(':hidden') 
 
       .eq(Math.floor(Math.random() * (10 - i))) 
 
       .show(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form> 
 
    <table> 
 
    <tbody> 
 
     <tr id="Tr0"> 
 
     <td>Question 1:</td> 
 
     <td> 
 
      <input type="radio" value="True" /> 
 
      <input type="radio" value="False" /> 
 
     </td> 
 
     </tr> 
 
     <tr id="Tr1"> 
 
     <td>Question 2:</td> 
 
     <td> 
 
      <input type="radio" value="True" /> 
 
      <input type="radio" value="False" /> 
 
     </td> 
 
     </tr> 
 
     <tr id="Tr2"> 
 
     <td>Question 3:</td> 
 
     <td> 
 
      <input type="radio" value="True" /> 
 
      <input type="radio" value="False" /> 
 
     </td> 
 
     </tr> 
 
     <tr id="Tr3"> 
 
     <td>Question 4:</td> 
 
     <td> 
 
      <input type="radio" value="True" /> 
 
      <input type="radio" value="False" /> 
 
     </td> 
 
     </tr> 
 
     <tr id="Tr4"> 
 
     <td>Question 5:</td> 
 
     <td> 
 
      <input type="radio" value="True" /> 
 
      <input type="radio" value="False" /> 
 
     </td> 
 
     </tr> 
 
     <tr id="Tr5"> 
 
     <td>Question 6:</td> 
 
     <td> 
 
      <input type="radio" value="True" /> 
 
      <input type="radio" value="False" /> 
 
     </td> 
 
     </tr> 
 
     <tr id="Tr6"> 
 
     <td>Question 7:</td> 
 
     <td> 
 
      <input type="radio" value="True" /> 
 
      <input type="radio" value="False" /> 
 
     </td> 
 
     </tr> 
 
     <tr id="Tr7"> 
 
     <td>Question 8:</td> 
 
     <td> 
 
      <input type="radio" value="True" /> 
 
      <input type="radio" value="False" /> 
 
     </td> 
 
     </tr> 
 
     <tr id="Tr8"> 
 
     <td>Question 9:</td> 
 
     <td> 
 
      <input type="radio" value="True" /> 
 
      <input type="radio" value="False" /> 
 
     </td> 
 
     </tr> 
 
     <tr id="Tr9"> 
 
     <td>Question 10:</td> 
 
     <td> 
 
      <input type="radio" value="True" /> 
 
      <input type="radio" value="False" /> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</form>

使用隱藏所有 tr最初

filter(':hidden')用於過濾隱藏要素

hide()，這將避免選擇相同tr多次
eq()使用用於從隱藏表中的行選擇tr
Math.floor(Math.random() * (10 - i))它用於生成用於隨機數
show()顯示所選擇的問題

來源

2014-10-30 08:56:22

//hide all trs 
$("tr").hide(); 

//determine the number of questions 
var trLength = $("tr").length; 

//create an array with this number in 
var numberArray = []; 
for (i=0; i<trLength; i++) { 
    numberArray.push(i); 
} 

//shuffle the array 
function shuffle(o){ 
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); 
    return o; 
}; 

numberArray = shuffle(numberArray); 

//use first 5 from shuffled array 
for (i=0; i<5; i++) { 
    $("tr").eq(numberArray[i]).show(); 
}

注意，此方法保證5個問題將被顯示。其他使用隨機數生成器的方法可能會選擇相同的隨機數兩次，因此試圖兩次顯示相同的問題，導致實際顯示的結果少於5個。

來源

2014-10-30 08:54:07 Coop

保存所有這些，然後得到一個隨機，代碼是根據：

var x = $('form tr') 
function getRandomInt (min, max) { 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
} 
min = 0; 
max = x.length; 
var random_number = getRandomInt(0, x.length); 
//you can get the random element by 
x[random_number]

希望這有助於

來源

2014-10-30 08:54:32 Aameer

難道這不會導致重複的隨機數？你不能兩次顯示相同的問題。 – Coop 2014-10-30 08:56:51

您可以添加一個條件，將隨機數保存在另一個數組中，並檢查是否已詢問該問題 – Aameer 2014-10-30 08:58:24

使用JavaScript隨機生成器來生成0之間數 - （例如x）的10。
之後，使用jquery隱藏ID =「TrX」的元素
存儲已生成的編號。
循環直到我們得到5個不同的數字。

隨機生成代碼：

Math.floor((Math.random() * 10)

來源

2014-10-30 08:57:04 VinkyH

像這樣：

var tr=$("table tr").get().sort(function(){ 
    return Math.round(Math.random())-0.5; 
}).slice(0,4); 
$(tr).show();

說明：

1）獲取陣列的所有TR元素。

2）然後隨機對它們進行排序。

3）接送n個元素

4）顯示它們

Working Demo

Taken From Answer Posted BY Nick Craver

來源

2014-10-30 08:57:29

嘗試這種情況：

<html> 
    <head> 
     <style type="text/css"> 
     tr { 
      display: none; 
     } 
     </style> 
     <script type="text/javascript"> 
     function selFive(){ 
      var idc=new Array(0,1,2,3,4,5,6,7,8,9); 
      for (var i = 0; i <5; i++) { 
       sel=Math.random()*idc.length; 
       left=idc.slice(0,sel); 
       right=idc.slice(sel+1,idc.length); 
       idc=left.concat(right); 
      }; 
      for (var i = idc.length - 1; i >= 0; i--) { 
       document.getElementById('Tr'+idc[i]).style.display='table-row'; 
      }; 
     } 
     </script> 
    </head> 
    <body onload="selFive()"> 
     <form> 
      <table> 
       <tbody> 
        <tr id="Tr0"> 
         <td>Question 1: </td> 
         <td><input type="radio" value="True" /><input type="radio" value="False" /></td> 
        </tr> 
        <tr id="Tr1"> 
         <td>Question 2: </td> 
         <td><input type="radio" value="True" /><input type="radio" value="False" /></td> 
        </tr> 
        <tr id="Tr2"> 
         <td>Question 3: </td> 
         <td><input type="radio" value="True" /><input type="radio" value="False" /></td> 
        </tr> 
        <tr id="Tr3"> 
         <td>Question 4: </td> 
         <td><input type="radio" value="True" /><input type="radio" value="False" /></td> 
        </tr> 
        <tr id="Tr4"> 
         <td>Question 5: </td> 
         <td><input type="radio" value="True" /><input type="radio" value="False" /></td> 
        </tr> 
        <tr id="Tr5"> 
         <td>Question 6: </td> 
         <td><input type="radio" value="True" /><input type="radio" value="False" /></td> 
        </tr> 
        <tr id="Tr6"> 
         <td>Question 7: </td> 
         <td><input type="radio" value="True" /><input type="radio" value="False" /></td> 
        </tr> 
        <tr id="Tr7"> 
         <td>Question 8: </td> 
         <td><input type="radio" value="True" /><input type="radio" value="False" /></td> 
        </tr> 
        <tr id="Tr8"> 
         <td>Question 9: </td> 
         <td><input type="radio" value="True" /><input type="radio" value="False" /></td> 
        </tr> 
        <tr id="Tr9"> 
         <td>Question 10: </td> 
         <td><input type="radio" value="True" /><input type="radio" value="False" /></td> 
        </tr> 
       </tbody> 
      </table> 
     </form> 
    </body> 
</html>

來源

2014-10-30 09:01:35

看一看下面的代碼示例：

HTML：

<table id="tableQuestions"> 
    <tbody> 
     <tr id="tr1"><td>Question 1</td></tr> 
     <tr id="tr2"><td>Question 2</td></tr> 
     <tr id="tr3"><td>Question 3</td></tr> 
     <tr id="tr4"><td>Question 4</td></tr> 
     <tr id="tr5"><td>Question 5</td></tr> 
     <tr id="tr6"><td>Question 6</td></tr> 
     <tr id="tr7"><td>Question 7</td></tr> 
     <tr id="tr8"><td>Question 8</td></tr> 
    </tbody> 
</table>

JQuery的

var generatedNumber; 


$(document).ready(function() { 
    $('#tableQuestions tr').each(function() { 
     $(this).css('display','none'); 
    }); 

    generatedNumber = new Array(); 

    for (var i = 1; i <= 5; i++) { 
     var n = getRandomArbitrary(); 
     alert('#tr' + parseInt(n).toString()); 
     $('#tr' + parseInt(n).toString()).css('display', ''); 
    } 
}); 

function getRandomArbitrary() { 
    var min = 1; 
    var max = 8; 
    var num = parseInt(Math.random() * (max - min) + min); 
    if (generatedNumber.indexOf(num) > 0) { 
     getRandomArbitrary(min, max); 
    } 

    return num ; 
}

來源

2014-10-30 09:04:10 SpiderCode

試試這個：使用Math.random獲得隨機行數和隱藏使用索引。

$(function(){ 
    $('input[value="Shuffle"]').click(function(){ 
     $('table tr').show(); 

     var count = 0; 
     var array = []; 
     while(count<5) 
     { var index = parseInt(Math.random(100)*10); 

      if(array.indexOf(index)<0) 
      { 
       array.push(index); 
       $('table tr:eq('+index+')').hide(); 
       count++; 
      }   

     } 
    }); 
});

JSfiddle Demo

來源

2014-10-30 09:09:03

如何選擇隨機5 TR並顯示給用戶？

回答

相關問題