td要素のランダムな取得、JQuery

startボタンを押したら１６マスの表の数字の背景がランダムに光っていくプログラムを作りたいのですが、tdをランダムに取得する方法がよくわかりません。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8">
    <title>ルーレット</title>
    <style type="text/css">
        table,td{
            border:solid 1px black;
            font-size:70px;
            text-align:center;
        }
        #box{    
            margin:auto;
            position:absolute;
            top:0px;
            bottom:0px;
            left:0px;
            right:0px;
        }
        #start,#tomeru,#reset{
            width:90px;
            height:30px;
            margin-left:5px;
            margin-top:10px;
        }
    </style>
    <script
  src="https://code.jquery.com/jquery-3.1.1.slim.js"
  integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA="
  crossorigin="anonymous"></script>
</head> 

<body>
    <div id="box">
    <table>
        <tr>
            <td>1</td><td>2</td><td>3</td><td>4</td>
        </tr>
        <tr>
            <td>5</td><td>6</td><td>7</td><td>8</td>
        </tr>
        <tr>
            <td>9</td><td>10</td><td>11</td><td>12</td>
        </tr>
        <tr>
            <td>13</td><td>14</td><td>15</td><td>16</td>
        </tr>
    </table>
    <button id="start">START</button>
    <button id="tomeru">STOP</button> 
    <!--idはtomeru!!! stopじゃない！！-->
    <button id="reset">RESET</button>
    </div>

<script>
var interval;  //setintervalとclearinterval繋ぐやつ
// start ボタン押したら何かを繰り返す関数
    $(function(){
        $('#start').click(function(){
            interval=setInterval(haikei,500);
        });
        
        
//その内容。背景色をランダムに変える
    $('td').eq('Math.random').css('background-color','yellow');
//この部分でランダムに16個あるtdを1個ずつ取得したいのですが、どうすればいいのでしょう。。。
</script>
</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

たとえばこんなかんじで

html
1<script>
2$(function(){
3  var l=$('#t1 td').length;
4  var timerId;
5  $(document).on('click','[value=START]',function(){
6    $(this).attr('value','STOP');
7    timerId=setInterval(function(){
8    var rand = Math.floor( Math.random() * l ) ;
9    $('#t1 td').css({"background-Color":""});
10    $('#t1 td').eq(rand).css({"background-Color":"red"});
11  },100);
12  });
13  $(document).on('click','[value=STOP]',function(){
14    $(this).attr('value','START');
15    clearInterval(timerId);
16  });
17});
18</script>
19<table id="t1">
20<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
21<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
22<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
23<tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
24</table>
25<input type="button" value="START">