JavaScript | 表を作成してみました

商品の在庫リストやガジェットのスペックなど、項目を複数表示させる必要がある時に、表を使う機会があるかと思います。

今回は、HTMLの「table」とJavaScriptを使って、表を作成してみました。

HTMLで表を作成

 <tr>
  <td>名前</td>
  <td>値段</td>
  <td>在庫</td>
 </tr>
 <tr>
  <td>iPhone</td>
  <td>9800円</td>
  <td>3個</td>
 </tr>

↓↓↓表示のされ方↓↓↓

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;

↓↓↓表示のされ方↓↓↓