現在、パソコンスクールでJavaScriptの勉強しています。授業でtableタグを利用して表の中で商品の名前や在庫を表示するコードを作成しました。元のコードはidを使っているため、項目を1回しか表示することができませんでした。なのでカテゴリーだけクラスで名前を付けて2回目以降も同じクラス名で利用出来るように、自分でカスタマイズしてみました。ところが、クラス名を利用すると1回目から表示できません。以下のサイトを参考にし、自分ではこのコードで動作すると思っていました。ですが何か根本的に間違っているようです。 ※タイプミスは確認しました。 https://bit.ly/2UOCebX 要するにtableタグを利用して表を作成する時に同じ項目を2行目以降も表示したいのですが、こういう時にはクラス名を利用し、getElementsByClassNameで値を取得したり代入することはできないのでしょうか？お手数ですが詳しい方、説明の上手な方、教えて下さい。よろしくお願いします。コードは以下の通りです。ブラウザーでの表示は画像のようになります。 idなので同じidをhtmlページで2回表示することは出来ない getElementsByClassNameを使ったけど表示できない title categoly price stock cat:ここだけClassName 「あり」「なし」 var jsbook = {title:'JavaScript入門', price:2500, stock:3, categoly:'書籍', cat:'付属品',}; document.getElementById('title').textContent = jsbook.title; document.getElementById('price').textContent = jsbook.price + '円'; document.getElementById('stock').textContent = '在庫:' + jsbook.stock; document.getElementById('categoly').textContent = jsbook.categoly; document.getElementsByClassName("cat").textContent = jsbook.cat;

詳しい人求む！

【JavaScript】tableタグを利用して表を作成したい

解決済

質問者：ZZ-TOP
質問日時：2018/12/17 12:07
回答数：4件

現在、パソコンスクールでJavaScriptの勉強しています。

授業でtableタグを利用して表の中で商品の名前や在庫を表示するコードを作成しました。
元のコードはidを使っているため、項目を1回しか表示することができませんでした。

なのでカテゴリーだけクラスで名前を付けて2回目以降も同じクラス名で利用出来るように、
自分でカスタマイズしてみました。

ところが、クラス名を利用すると1回目から表示できません。

以下のサイトを参考にし、自分ではこのコードで動作すると思っていました。
ですが何か根本的に間違っているようです。
※タイプミスは確認しました。

https://bit.ly/2UOCebX

要するにtableタグを利用して表を作成する時に同じ項目を2行目以降も表示したいのですが、
こういう時にはクラス名を利用し、getElementsByClassNameで値を取得したり代入することはできないのでしょうか？

お手数ですが詳しい方、説明の上手な方、教えて下さい。よろしくお願いします。

コードは以下の通りです。
ブラウザーでの表示は画像のようになります。

<html>
<body>
<h5>idなので同じidをhtmlページで2回表示することは出来ない</h5>
<h5>getElementsByClassNameを使ったけど表示できない</h5>
<section>
<table>
<tr>
<td>title</td>
<td>categoly</td>
<td>price</td>
<td>stock</td>
<td>cat:ここだけClassName</td>
</tr>
<tr>
<td id="title"></td>
<td id="categoly"></td>
<td id="price"></td>
<td id="stock"></td>
<td class="cat"></td>
</tr>

<tr>
<td id="title"></td>
<td id="categoly"></td>
<td id="price"></td>
<td id="stock"></td>
<td class="cat">「あり」「なし」</td>
</tr>
</table>
</section>

<script>
var jsbook = {title:'JavaScript入門', price:2500, stock:3, categoly:'書籍', cat:'付属品',};
document.getElementById('title').textContent = jsbook.title;
document.getElementById('price').textContent = jsbook.price + '円';
document.getElementById('stock').textContent = '在庫:' + jsbook.stock;
document.getElementById('categoly').textContent = jsbook.categoly;

document.getElementsByClassName("cat").textContent = jsbook.cat;
</script>
</body>
</html>

解答して頂きありがとうございます。
お礼にあるやりたいことはこんな感じです。

No.3の回答に寄せられた補足コメントです。補足日時：2018/12/17 17:20
通報する

通報する

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

質問の本文を隠す

回答 (4件)

No.1ベストアンサー

回答者： yambejp
回答日時：2018/12/17 12:47

とにかくidは２箇所以上に使えないので文法としてまちがっています

- 1
- 件

通報する

この回答へのお礼

解答して頂きありがとうございます。

見事にやりたいことそのままです。

今回は解答して頂きありがとうございます。
機会がありましたら、またお願いします。

追記
以下の1行だけ何をやっているのか全くイメージできないです。

window.addEventListener('DOMContentLoaded', function(e)

まだDOMを利用した要素の取得を習っていないので、
（テキストで軽く読みました）

細かく説明して頂いても、こちらの知識不足で理解できないと思います。

ですが、これから習うので、どういうコードの構造になるのかを理解するために、
ヒントになるような事がありましたら簡単に説明して頂ければうれしいです。

※とりあえず、以下のサイトを参考にquerySelectorAllについて調べてみました
http://www.sirochro.com/note/js-queryselector-qu …

※お手数でしたらスルーでOKです。
※他の方よりのアドバイスがあるかもしれないので、質問はしばらく開けておきます。

通報する

お礼日時：2018/12/17 14:32

No.2

回答者： yambejp
回答日時：2018/12/17 14:36

> window.addEventListener('DOMContentLoaded'

これはjsをhead内や別ファイルにするとき
どこで宣言しても動くようにつけておくおまじないみたいなものです
試しにこの部分と、最後の「});」を外すと動かないのがわかると思います。
（jsをケツにもっていくと動く）

でやっていることはwindow.onload的なロード時にする処理の指示ですが
load時の処理とは画面がレンダリングされる前に動作する点が違います
（つまり動き出しが速い）

- 1
- 件

通報する

この回答へのお礼

何度も解答して頂きありがとうございます。

> window.addEventListener('DOMContentLoaded'

これはjsをhead内や別ファイルにするとき
どこで宣言しても動くようにつけておくおまじないみたいなものです
試しにこの部分と、最後の「});」を外すと動かないのがわかると思います。

よくわかりました。
↓　これみたいなものですね。
window.onload = function(){

何度も解答して頂きありがとうございます。
機会がありましたら、またお願いします。

※別の方がアドバイスして下さったので、しばらく質問は開けておきます。

通報する

お礼日時：2018/12/17 17:31

No.3

回答者： babu_babu_baboo
回答日時：2018/12/17 15:46

いずれこうしたくなる！かも？

<!DOCTYPE html>
　<meta charset="UTF-8">
　<title>Table</title>
　　　<style>
　　　　tr td:first-of-type {
　　　　　　 color: red;
　　　　　　　 width: 20em;
　　　　　　　　}
　　　　　　　　tr td:nth-of-type(2), tr td:nth-of-type(3) {
　　　　　　　　 text-align: right;
　　　　　　　}
　　　　　　tr td:nth-of-type(2):after {
　　　　 content: "円"
　　　}
　tr td:nth-of-type(3):before {
　 content: "在庫:"
}
　td.cat { color: blue; }
　</style>
　　　
　　　　<body>
　　　　　　<table border="1">
　　　　　　　<tr><th>title <th>categoly <th>price <th>stock <th>cat
　　　　　　　　</table>
　　　　　　　　
　　　　　　　　<script>
　　　　　　　const BOOKS = [
　　　　　　 {title:'JavaScript入門', price:2500, stock:3, categoly:'書籍', cat:'付属品'},
　　　　 {title:'JavaScript初級入門', price:25000, stock:2, categoly:'書籍', cat:'付属品'},
　　　 {title:'JavaScript中級入門', price:250000, stock:1, categoly:'書籍', cat:'付属品'}
　];
　
let table = document.querySelector ('table');
　
　BOOKS.forEach (book => {
　　　 let tr = table.insertRow (-1);
　　　　 Object.keys (book).forEach (key => {
　　　　　　 let td = tr.insertCell (-1);
　　　　　　　 td.classList.add (key);
　　　　　　　　 td.textContent = book[key];
　　　　　　　　 });
　　　　　　　　});
　　　　　　　
　　　　　　</script>

- 1
- 件

通報する

この回答へのお礼

解答して頂きありがとうございます。

今のレベルでは使い方が全く理解できないです(笑)。
本当は以下のようにしたいと思っていました。

ですが、まだ知識不足なので、とりあえず同じものを2行書けるようにしたい、、、
ということで、今回の質問をさせて頂きました。

目標としていること
１）カテゴリーを「書籍」と「雑誌」の2つにわける　※クラスで分けたい
２）「付属品」の有無を「あり」と「なし」で記載できるようにする　※クラスで別けたい
３）「付属品」の内容は手作業で入力　※いろんな「おまけ」があるのでクラス別けは不可
４）「タイトル」はidでもOK　※同じ書籍は「在庫」でカウントできるから

※捕捉に画像で張り付けておきます。

今回は解答して頂きありがとうございます。
機会がありましたら、またお願いします。

※しばらく質問はあけておきます。