javascript domによる九九の作成時のエラー　

javascriptについて質問です。
現在9x9の表をdomを用いて行おうとしているのですが、うまく行きません。
一応、document.writeではうまくいきました。
また、下記の表は外枠ですが既にエラーとなってしまいます。

エラー表記は「 console.error('Could not create SImpleDOM structure mostly cause of malformed HTML');」

わかる方いましたら、よろしくお願いします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>問06</title>
</head>

<body>
<h1>9x9までの九九早見表</h1>
<table border= '1';>
<p id='main'></p>

 <script>
 var str=
 document.getElementById('main');
 str.innerHTML=('<tr><th> </th>');
 str.innerHTML=('</tr>');
 </script>
</table>
</body>
</html>

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

回答3件

エラーによるとHTMLが不正だといわれているのでinnerHTMLの記述に誤った箇所があるのではないでしょうか。

str.innerHTML=('</tr>');

とかが原因なのでは？
あと、tableのborderを指定しているところにも少しおかしいところがありますね。
私ならばこんな感じで書いてみますね。

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="container"></div>
9<script>
10    var table = document.createElement('table'), tr, td, row, cell;
11    for (row = 1; row < 10; row++) {
12        tr = document.createElement('tr');
13        for (cell = 1; cell < 10; cell++) {
14            td = document.createElement('td');
15            tr.appendChild(td);
16            td.innerHTML = row * cell;
17        }
18        table.appendChild(tr);
19    }
20    document.getElementById('container').appendChild(table);
21</script>
22</body>
23</html>

投稿2016/12/02 09:42

編集2016/12/02 09:44

退会済みユーザー

総合スコア0

domをどう捉えるか次第でしょうね
こんな感じでどうでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>問06</title>
6<script>
7window.onload=function(){
8  var p=document.getElementById('main');
9  var t=document.createElement('table');
10  var tb=document.createElement('tbody');
11  p.appendChild(t);
12  t.appendChild(tb);
13  t.setAttribute('border','1');//追記
14  for(var i=0;i<=9;i++){
15    var tr=document.createElement('tr');
16    for(var j=0;j<=9;j++){
17      if(i==0 || j==0){
18        var th=document.createElement('th');
19        if(i==0 && j==0){
20          th.appendChild(document.createTextNode(' '));
21        }else if(i==0){
22          th.appendChild(document.createTextNode((j).toString()));
23        }else{
24          th.appendChild(document.createTextNode((i).toString()));
25        }
26        tr.appendChild(th);
27      }else{
28        var td=document.createElement('td');
29        td.appendChild(document.createTextNode((i*j).toString()));
30        tr.appendChild(td);
31      }
32    }
33    tb.appendChild(tr);
34  }
35}
36</script>
37</head>
38
39<body>
40<h1>9x9までの九九早見表</h1>
41<p id='main'></p>
42</p>
43</body>
44</html>