Q&A
詳細に頂き、ありがとうございました！助かりました。
###前提・実現したいこと
独学で勉強しており、下記の表を作りたいのですが、中々作成することが出来ません。
教えて頂けないでしょうか。
【課題】
jQueryを用い、隣り合うセルの色が異なる九九表を作成してください。
](fc4ab009dd0a5200a86124837060d4b1.png)
###該当のソースコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> /* 課題処理を追加 */ </script> </head> <body> <table id="matrix"> <caption>九九表</caption> </table> </body> </html> ###試したこと for文は理解できるのですが、表自体の作り方、色を交互につける方法が分かりません。 for (var i = 1; i <= 9; i++){ for (var j = 1; j <= 9; j++){ document.write("<p>"+i+ " * " + j + " = " + (i * j) + "<p>");
回答2件
0
ベストアンサー
jQueryを使用するならば、以下のように行うこともできると思います。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6</head> 7<body> 8<div class="containter"> 9 <table id="table1"></table> 10</div> 11<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 12<script> 13 var table = $("#table1"); 14 for (var i = 1; i < 10; i++) { 15 table.append("<tr id='tr_" + i + "'></tr>"); 16 for (var j = 1; j < 10; j++) { 17 $("#tr_" + i).append("<td>" + (i * j) + "</td>").children().eq(j - 1).css({ 18 "background-color": (i * 9 + j) % 2 ? "#ffffff" : "#cccccc" 19 }); 20 } 21 } 22</script> 23</body> 24</html>
投稿2017/10/12 13:37
総合スコア14731
0
たとえばこうすると市松に処理できます
CSS
1#matrix{border-collapse:collapse;} 2#matrix td{border:solid 1px #000000;background-Color:aqua;} 3#matrix tr:nth-child(2n) td:nth-child(2n), 4#matrix tr:nth-child(2n+1) td:nth-child(2n+1){background-Color:yellow;}
javascript
1$(function(){ 2 for(var i=1;i<=9;i++){ 3 var tr=$('<tr>'); 4 for(var j=1;j<=9;j++){ 5 var content=j+"*"+i+"="+(i*j); 6 tr.append($('<td>').text(content)); 7 } 8 $('#matrix tbody').append(tr); 9 } 10}); 11
HTML
1<table id="matrix"> 2<caption>九九表</caption> 3<tbody> 4</tbody> 5</table>
投稿2017/10/12 13:17
編集2017/10/12 13:24
総合スコア116724
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/13 02:33