急いでいます！

このjavascriptがわかりません

解決済

質問者：sushikui
質問日時：2015/12/01 05:34
回答数：4件

javaのfor文を使って縦４マス・横７マスの四角形を作り、左上から一マスごとに数字を入れ、最後のマスには28が入った四角形を作り表示するにはどうすればいいと思いますか？（画像のようにブラウザに表示させたいです。表示されたときの数字や四角形の大きさなどに要望はありません。）

質問が的確ではなく申し訳ありません。
出題された問題には下のような文字で（）にjavascriptを記入と書かれていました。
他には何も書かれていませんでした。
それでもご提案していだたき誠にありがとうございました。

<!DOCTYPE html>
<html lang="java">
<head>
<meta charset="utf-8">
<title>sample</title>

</head>
<body>
（ここにjavascriptを記入と書かれていました。）
</body>
</html>

補足日時：2015/12/01 13:44
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： yambejp
回答日時：2015/12/01 14:16

出題状況からみるとDOMではなさそうな雰囲気ですが

仮にbodyの中に書く場合でもこんな風にかけます
<!DOCTYPE html>
<html lang="java">
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<body>
<script>
var table=document.createElement("table");
table.setAttribute("border",1);
var tbody=document.createElement("tbody");
for(var i=0;i<4;i++){
var tr=document.createElement("tr");
for(var j=0;j<7;j++){
var td=document.createElement("td");
var txt=i*7+j+1;
td.appendChild(document.createTextNode(txt));
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
document.getElementsByTagName("body")[0].appendChild(table);
</script>
</body>
</html>

- 0
- 件

通報する

No.3

回答者： yambejp
回答日時：2015/12/01 10:21

ようは二重ループを使いましょうって課題ですよね？

たとえばこう

<script>
window.onload=function(){createTable();}
function createTable(){
var hoge=document.getElementById("hoge");
var table=document.createElement("table");
table.setAttribute("border",1);
var tbody=document.createElement("tbody");
for(var i=0;i<4;i++){
var tr=document.createElement("tr");
for(var j=0;j<7;j++){
var td=document.createElement("td");
var txt=i*7+j+1;
td.appendChild(document.createTextNode(txt));
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
hoge.appendChild(table);
}
</script>
<div id="hoge"></div>

- 0
- 件

通報する

No.2

回答者： zircon3
回答日時：2015/12/01 09:36

どのプログラミング言語を使って実装するかは置いておいて、ご自身はどういう処理手順で処理したらよいと考えられていますか？

そしてそれをJavascriptで実装しようとした時、具体的に何がわかりませんか？

特に前者が何も無いということだと、出来上がった動くものはあなたの成果ではないし、今後どの問題も分からないということにも成りかねません。
基本的な勝利手順（アルゴリズム）がわからないということなのであれば、まずそこをしっかり学ぶこと、考えることが必要なのではないでしょうか？
最初は「その方法ではこういう場合にこんなことになってしまうじゃない」と指摘されても、考えなかったのとの差はものすごく大きい訳で。。。

頑張ってください。

- 0
- 件

通報する

参考程度に

No.1

回答者： fujillin
回答日時：2015/12/01 09:13

ご存知とは思いますが、ご質問のように表示されるHTMLのマークアップはいろいろ考えられます。

例えば表にして表示するとか、あるいはリストとにするとかその他いろいろ・・・

目的や意味に応じて実際のマークアップは変わってくると考えられますし、スクリプトから生成する方法もいろいろ考えられます。
とりあえず、ご質問のような表示がされれば良いということとしての一例です。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>sample</title>

<style type="text/css">
#hoge { width:370px; }
#hoge>span {
display:inline-block;
width:50px; height:50px;
border:1px solid #888;
font-size:24px; font-weight:bold;
text-align:center; line-height:50px;
}
</style>
</head>
<body>

<div id="hoge"></div>

<script type="text/javascript">
var i, n = 28, html = "";
for(i=1; i<=n; i++) html += "<span>" + i + "</span>";
document.getElementById("hoge").innerHTML = html;
</script>
</body>
</html>

※マークアップも、スクリプトもいろいろ考えられすぎるのであくまでも例だと思ってください。