配列で作る商品の単価と在庫の関係の表組み｜実践課題F

プレビュー

PC版

配列で作る商品の単価と在庫の関係の表組み - jsdo.it - share JavaScript, HTML5 and CSS

スマートフォン版

コード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>配列</title>
<style>
body {
    font-family:
	"ヒラギノ角ゴ Pro W3",
	"Hiragino Kaku Gothic Pro",
	"メイリオ", 
	Meiryo, Osaka, 
	"ＭＳ Ｐゴシック", 
	"MS PGothic", 
	sans-serif；	
}
table,th,td {
    border: 1px solid #000;
    border-collapse: collapse;
}
th {
    background-color: #eee;
    width: 150px;
    height: 30px;
}
td {
    text-align: center;
    height: 30px;
}
.deco {
    color: #F00;
}
</style>
<script>
var product = [
    {name:'リラックスチェア',price:'4000円',zaiko:500},
    {name:'リラックスデスク',price:'12000円',zaiko:200},
    {name:'ブックスタンド',price:'800円',zaiko:"<span class='deco'>在庫切れ</span>"}
];
</script>
</head>
<body>
<script>
document.write("<h1>新商品価格表<\/h1>");

document.write("<table>");
document.write("<tr><th>製品名<\/th><th>価格<\/th><th>在庫<\/th><\/tr>");

for(var i=0 ; i<product.length; i++){
    document.write("<tr>");
    document.write("<td>",product[i].name,"<\/td>");
    document.write("<td>",product[i].price,"<\/td>");
    document.write("<td>",product[i].zaiko,"<\/td>");
    document.write("<\/tr>");
}
document.write("<\/table>");
</script>
</body>
</html>