从列行中选择随机单元格

时间:2018-07-31 17:36:40

标签: javascript angular angular5 angular6

所以我以前从来没有真正做过此事,这让我大吃一惊,因为似乎应该有一种简单的方法来做到这一点。所以我有一个这样的表:

--------------------------------------------
|Classes|Name 1|Name 2|Name 3|Name 4|Name 5|
--------------------------------------------
|Class 1|   1  |   1  |   1  |  1,2 |  --  |
--------------------------------------------
|Class 2|   2  | 2,3,4|   2  |  --  |  --  |
--------------------------------------------
|Class 3|   3  | 5,6  |  3,4 |  3,4 |  --  |
--------------------------------------------
|Class 4|  4,5 |  --  |  --  |  --  |  --  |
--------------------------------------------
|Class 5|   6  |   7  |  5,6 |  7,8 |  --  |
--------------------------------------------

基本上,我有一项服务从第一行中选择一个随机的“名称”。然后,我需要根据所选的随机“名称”单元格和我在服务中生成的随机数来选择随机的“类别”单元格。

很明显,我可以使用很多if else语句来执行此操作,但是有没有更清洁或更完善的方法来执行此操作?对我来说,使用jQuery不是一个选择。我已经搜索了一段时间,但是找不到任何特定于Angular / javascript的东西,这使我在这里提出了这个问题。

1 个答案:

答案 0 :(得分:0)

您可以使用Math.random()来生成01之间的随机数。

要生成介于x(含)和y(不含)之间的随机数,可以使用以下函数:

function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}

要获取一个随机名称,您需要生成一个比表的行数少0到1之间的随机数(获取一个随机行)和0到3之间的随机数(获取一个随机单元格) )。

要获取随机类,您需要生成一个比表的行数少0到1之间的随机数(以获取随机行)。

#myTable{
  border: 1px solid grey;
  margin: 5px;
}

#myTable th, td{
  border: 1px solid grey;
}
<table id="myTable">
<tr><th>Classes</th><th>Name 1</th><th>Name 2</th><th>Name 3</th><th>Name 4</th><th>Name 5</th></tr>
<tr><td>Class1</td><td>Name 1.1</td><td>Name 2.1</td><td>Name 3.1</td><td>Name 4.1</td><td>Name 5.1</td></tr>
<tr><td>Class2</td><td>Name 1.2</td><td>Name 2.2</td><td>Name 3.2</td><td>Name 4.2</td><td>Name 5.2</td></tr>
<tr><td>Class3</td><td>Name 1.3</td><td>Name 2.3</td><td>Name 3.3</td><td>Name 4.3</td><td>Name 5.3</td></tr>
<tr><td>Class4</td><td>Name 1.4</td><td>Name 2.4</td><td>Name 3.4</td><td>Name 4.4</td><td>Name 5.4</td></tr>
<tr><td>Class5</td><td>Name 1.5</td><td>Name 2.5</td><td>Name 3.5</td><td>Name 4.5</td><td>Name 5.5</td></tr>
</table>
<br/>
<button onClick="getRandomName()">
Get Random Name
</button>
<button onClick="getRandomClass()">
Get Random Class
</button>
<p/>
<span id="randomName"></span>
<br/>
<span id="randomClass"></span>
<script>
function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
}
var table = document.getElementById("myTable");
var rows = table.rows.length;
function getRndName(){
var random1 = getRndInteger(0, 3);
var random2 = getRndInteger(0, rows-1);
var randomName = table.rows[random2+1].cells[random1+1].textContent;
return randomName;
}
function getRndClass(){
  var random = getRndInteger(0, rows-1);
  var randomClass = table.rows[random+1].cells[0].textContent;
  return randomClass;
}
function getRandomName(){
 var randomName = document.getElementById('randomName');
 randomName.textContent = "Random Name: ";
 randomName.textContent += getRndName();
}

function getRandomClass(){
   var randomClass = document.getElementById('randomClass');
   randomClass.textContent = "Random Class: ";
   randomClass.textContent += getRndClass();
}
</script>