<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="./jquery-1.2.6.js"></script>
<style>
table {
border:solid 1px black;
}
thead {
background-color:lightblue;
font-size:large;
}
table.shoptable {
}
th {
border:solid 1px black;
}
td {
font-size:small;
}
td.number {
border:solid 1px black;
width:100px;
}
td.name {
border:solid 1px black;
width:200px;
}
td.money {
border:solid 1px black;
width:100px;
}
td.num {
border:solid 1px black;
width:100px;
}
.stripe td {
background: aliceblue;
}
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
$(".shoptable tr:even").addClass("stripe");
});
//-->
</script>
</head>
<table class="shoptable">
<thead>
<tr>
<th class="number">商品番号</th>
<th class="name">商品名</th>
<th class="money">単価</th>
<th class="num">個数</th>
</tr>
</thead>
<tbody>
<tr>
<td class="number">1</td>
<td class="name">ノートPC</td>
<td class="money">\10,000</td>
<td class="num">10</td>
</tr>
<tr>
<td class="number">1</td>
<td class="name">ノートPC</td>
<td class="money">\10,000</td>
<td class="num">10</td>
</tr>
<tr>
<td class="number">1</td>
<td class="name">ノートPC</td>
<td class="money">\10,000</td>
<td class="num">10</td>
</tr>
<tr>
<td class="number">1</td>
<td class="name">ノートPC</td>
<td class="money">\10,000</td>
<td class="num">10</td>
</tr>
<tr>
<td class="number">1</td>
<td class="name">ノートPC</td>
<td class="money">\10,000</td>
<td class="num">10</td>
</tr>
<tr>
<td class="number">1</td>
<td class="name">ノートPC</td>
<td class="money">\10,000</td>
<td class="num">10</td>
</tr>
<tr>
<td class="number">1</td>
<td class="name">ノートPC</td>
<td class="money">\10,000</td>
<td class="num">10</td>
</tr>
<tr>
<td class="number">1</td>
<td class="name">ノートPC</td>
<td class="money">\10,000</td>
<td class="num">10</td>
</tr>
</tbody>
</table>
</body>
</html>
ストライプテーブル
jQueryを使ってストライプテーブルを作ってみました。
0 コメント:
コメントを投稿