使用 jQuery 在我的表中随机选择两个网格

Question

我正在尝试将enemy_1 和enemy_2 随机附加到我的6x7 表上的<td> 标记中。

我不知道如何用随机方法或任何其他方式解决这个问题。

// target -> all <td>
$('table').find('td');

// two individual enemies
var enemy_1 = $('<span>enemy_1</span>');
var enemy_2 = $('<span>enemy_2</span>');

这是我的桌子

for (var i = 0; i < 7; i++) {
    $("table").append("<tr></tr>");
}

for (var i = 0; i < 6; i++) {
    $("table tr").append("<td style='background:#DDDDDD;height:50px;width:50px;'></td>");
}

$('table').prepend('<div>Start</div');
$('table').append('<div>End</div');

$('table div:last-child').css({
  position :'absolute',
  right: '0'
});

Answer 1

这是一个使用Math.random()的逻辑，它将生成一个随机数，然后我们将它乘以100并对其进行四舍五入，然后如果它是2的倍数，我们将得到enemy_1 span else enemy_2。

随机逻辑取自以下链接。

SO Answer

// target -> all <td>
// $('table').find('td');

// two individual enemies
var enemy_1 = '<span>enemy_1</span>';
var enemy_2 = '<span>enemy_2</span>';

for (var i = 0; i < 7; i++) {
  $("table").append("<tr></tr>");
}

for (var i = 0; i < 6; i++) {
  $("table tr").append("<td style='background:#DDDDDD;height:50px;width:50px;'></td>");
}

$('table').prepend('<div>Start</div');
$('table').append('<div>End</div');

$('table div:last-child').css({
  position: 'absolute',
  right: '0'
});
//generate random number 1
var numberOne = 1,
  numberTwo = 1;
do {
  numberOne = Math.floor(Math.random() * 42) + 1;
} while (numberOne === numberTwo);
do {
  numberTwo = Math.floor(Math.random() * 42) + 1;
} while (numberTwo === numberOne);
$('td').each(function(index) {
  if (index === numberOne) {
    $(this).append(enemy_1);
  }
  if (index === numberTwo) {
    $(this).append(enemy_2);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table></table>