Using jQuery to choose two grids randomly in my table

Question

I am trying to append enemy_1 and enemy_2 in the <td> tags on my 6x7 table randomly.

I don't know how to solve this with random method or any other way.

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

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

here is my table

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'
});

Placing divs inside the table but not in a `` is a bad idea. — zer00ne, Oct 18 '17 at 05:30

Naren Murali · Answer 1 · 2017-10-18T06:24:25.417

Here is a logic using Math.random() which will generate a random number, then we multiply it by 100 and round it, then if its a multiple of 2, we will get enemy_1 span else enemy_2.

Random logic taken from the below link.

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>

sorry, I didn't describe very clear. I mean these two enemies only appear one time in the table. what can I do for this? — Alison Wu, Oct 18 '17 at 06:17
@AlisonWu Next time include all the details, please check my updated answer! — Naren Murali, Oct 18 '17 at 06:25
@ Naren Murali Yep, thanks for showing me the idea and way to solve this one. — Alison Wu, Oct 18 '17 at 12:20

Using jQuery to choose two grids randomly in my table

1 Answers1