商品の在庫リストやガジェットのスペックなど、項目を複数表示させる必要がある時に、表を使う機会があるかと思います。
今回は、HTMLの「table」とJavaScriptを使って、表を作成してみました。
HTMLで表を作成
<tr> <td>名前</td> <td>値段</td> <td>在庫</td> </tr> <tr> <td>iPhone</td> <td>9800円</td> <td>3個</td> </tr>
↓↓↓表示のされ方↓↓↓
名前 | 値段 | 在庫 |
iPhone | 9800円 | 3個 |
HTML + JavaScriptで表を作成
<table> <tr> <td id="name1"></td> <td id="price1"></td> <td id="stock1"></td> </tr> <tr> <td id="name2"></td> <td id="price2"></td> <td id="stock2"></td> </tr> </table>
var item = {nametitle:'名前',pricetitle:'値段',stocktitle:'在庫',name:'iPhone',price:'9800',stock:'3'}; document.getElementById('name1').textContent = item.nametitle; document.getElementById('price1').textContent = item.pricetitle; document.getElementById('stock1').textContent = item.stocktitle; document.getElementById('name2').textContent = item.name; document.getElementById('price2').textContent = item.price; document.getElementById('stock2').textContent = item.stock;
↓↓↓表示のされ方↓↓↓
コメント