【初心者】jquaryでマス目を作る

前提・実現したいこと

最近Jsとjquaryの勉強を始めた初心者です。
4×4の16マスのマス目でルーレットを作っているのですが、マス目もjquaryで作ると言う課題が
理解出来ず困っています。

発生している問題・エラーメッセージ

>tdタグの中に入る数値は記入できたのですが、tdタグに付ける属性のidがまだなので、これも記入できるように修正お願いします。 
　 
<td id="td1">1</td> 
<td id="td2">2</td> 
<td id="td3">3</td> 
: 
: 

のような感じでid属性が付くと良いと思います。 
ここまで出来たら、後は、ランダムに取得した数値を使って、tdタグの背景色を変える処理を書く事になります。 

と講師の方に言われたのですが、どこにどう記述してよいか分かりません…

該当のソースコード

        
        // jqueryでマス目を作る
        function make_roulette(){
            for (var i= 0; i < 4; i++){
                $('#roulette table').append('<tr></tr>');
                for (var j = 0; j < 4; j++){
                $('#roulette table tr:last').append('<td></td>' + ( (i * 4) + (j + 1) ) + '</td>');     
                }
            }
        }

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

ベストアンサー

以下のようにしてみてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<div id="roulette">
9    <table></table>
10</div>
11<button id="button1">クリック</button>
12<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
13<script>
14    function make_roulette() {
15        for (var i = 0; i < 4; i++) {
16            $('#roulette table').append('<tr></tr>');
17            for (var j = 0; j < 4; j++) {
18                var td = (i * 4) + (j + 1);
19                $('#roulette table tr:last').append('<td id="td' + td + '">' + td + '</td>'); //td要素にid属性をつける処理
20            }
21        }
22    }
23
24    $(function () {
25        make_roulette();
26    });
27
28    $("#button1").on("click", function () {
29        var td = $("#roulette td"), min = 0, max = $("#roulette td").length - 1,
30            random_td = Math.floor(Math.random() * (max + 1 - min)) + min; // 0～15までの乱数を取得
31        td.css({background: "transparent"});
32        td.eq(random_td).css({background: "red"});
33    });
34</script>
35</body>
36</html>

投稿2018/04/04 15:29

s8_chu

総合スコア14731

divでテーブルを構成するならこんな感じです
（本来ならスタイルシートは分けたほうが楽）

javascript
1<script>
2$(function(){
3  $('#t1').css({"display":"table","border-collapse":"collapse"});
4  var tbody=$('<div>').addClass('tbody').css({"display":"table-row-group"});
5  Object.keys(Array(4).fill(null)).forEach(function(x){
6    var row=$('<div>').addClass('row').css({display:"table-row"});
7    Object.keys(Array(4).fill(null)).forEach(function(y){
8      $('<div>')
9        .addClass('cell')
10        .attr('id','td'+(parseInt(x)*4+parseInt(y)+1))
11        .text(parseInt(x)*4+parseInt(y)+1)
12        .css({"display":"table-cell","border":"1px solid #000000","text-align":"center"})
13        .appendTo(row);
14    });
15    row.appendTo(tbody);
16  });
17  tbody.appendTo($('#t1'));
18});
19</script>
20
21<div id="t1"></div>
22