반응형
<script type="text/javascript">
window.onload = function() {
$("#table1").show();
$("#table2").hide();
$("#table3").hide();
$("#table4").hide();
}
$(document).ready(function() {
$("#btn_1").click(function() {
$("#table1").show();
$("#table").hide();
$("#table3").hide();
$("#table4").hide();
})
$("#btn_2").click(function() {
$("#table1").hide();
$("#table2").show();
$("#table3").hide();
$("#table4").hide();
})
$("#btn_3").click(function() {
$("#table1").hide();
$("#table2").hide();
$("#table3").show();
$("#table4").hide();
})
$("#btn_4").click(function() {
$("#table1").hide();
$("#table2").hide();
$("#table3").hide();
$("#table4").show();
})
})
</script>
<body>
<div class="buttonbox">
<button type="button" id="btn_1">tap1</button>
<button type="button" id="btn_2">tap2</button>
<button type="button" id="btn_3">tap3</button>
<button type="button" id="btn_4">tap4</button>
</div>
<div style="clear:both;"></div>
<div style="width : 480px; height: 400px;">
<div id="table1" width="480px">
<table class="col-100 col">
<colgroup>
<col width="10%">
<col width="20%">
<col width="*%">
<col width="*%">
</colgroup>
<thead>
<tr>
<th>#</th>
<th>제품명</th>
<th>상세설명</th>
<th>가격</th>
<th>비고</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="checkbox2 m-0">
<input id="checkbox0" type="checkbox">
<label for="checkbox0">
</label>
</div>
</td>
<td>1</td>
<td>~~~</td>
<td>100$</td>
<td> </td>
</tr>
<tr>
<td>
<div class="checkbox2 m-0">
<input id="checkbox0" type="checkbox">
<label for="checkbox0">
</label>
</div>
</td>
<td>2</td>
<td>~~~</td>
<td>100$</td>
<td> </td>
</tr>
<tr>
<td>
<div class="checkbox2 m-0">
<input id="checkbox0" type="checkbox">
<label for="checkbox0">
</label>
</div>
</td>
<td>3</td>
<td>~~~</td>
<td>100$</td>
<td> </td>
</tr>
</tbody>
</table>
</div>
<div id="table2" width="480px">
<table class="col-100 col">
<colgroup>
<col width="10%">
<col width="20%">
<col width="*%">
<col width="*%">
</colgroup>
<thead>
<tr>
<th>#</th>
<th>22</th>
<th>22</th>
<th>22</th>
<th>22</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="checkbox2 m-0">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">
</label>
</div>
</td>
<td>☆</td>
<td>☆</td>
<td> </td>
<td>☆</td>
</tr>
<tr>
<td>
<div class="checkbox2 m-0">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">
</label>
</div>
</td>
<td>☆</td>
<td>☆</td>
<td> </td>
<td>☆</td>
</tr>
<tr>
<td>
<div class="checkbox2 m-0">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">
</label>
</div>
</td>
<td>☆</td>
<td>☆</td>
<td> </td>
<td>☆</td>
</tr>
<tr>
<td>
<div class="checkbox2 m-0">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">
</label>
</div>
</td>
<td>☆</td>
<td>☆</td>
<td> </td>
<td>☆</td>
</tr>
<tr>
<td>
<div class="checkbox2 m-0">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">
</label>
</div>
</td>
<td>☆</td>
<td>☆</td>
<td> </td>
<td>☆</td>
</tr>
</tbody>
</table>
</div>
<div id="table3" width="480px">
<table class="col-100 col">
<colgroup>
<col width="10%">
<col width="20%">
<col width="*%">
<col width="*%">
</colgroup>
<thead>
<tr>
<th>3</th>
<th>3</th>
<th>3</th>
<th>3</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="checkbox2 m-0">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">
</label>
</div>
</td>
<td>♥</td>
<td>♥</td>
<td>♥</td>
<td>♥</td>
</tr>
<tr>
<td>
<div class="checkbox2 m-0">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">
</label>
</div>
</td>
<td>♥</td>
<td>♥</td>
<td>♥</td>
<td>♥</td>
</tr>
<tr>
<td>
<div class="checkbox2 m-0">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">
</label>
</div>
</td>
<td>♥</td>
<td>♥</td>
<td>♥</td>
<td>♥</td>
</tr>
</tbody>
</table>
</div>
<div id="table4" width="480px">
<table class="col-100 col">
<colgroup>
<col width="10%">
<col width="20%">
<col width="*%">
<col width="*%">
</colgroup>
<thead>
<tr>
<th>4</th>
<th>4</th>
<th>4</th>
<th>4</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="checkbox2 m-0">
<input id="checkbox0" type="checkbox">
<label for="checkbox0">
</label>
</div>
</td>
<td>♤</td>
<td>♤</td>
<td> </td>
<td>%<br>%<br>%</td>
</tr>
<tr>
<td>
<div class="checkbox2 m-0">
<input id="checkbox0" type="checkbox">
<label for="checkbox0">
</label>
</div>
</td>
<td>♤</td>
<td>♤</td>
<td> </td>
<td>%<br>%<br>%</td>
</tr>
<tr>
<td>
<div class="checkbox2 m-0">
<input id="checkbox0" type="checkbox">
<label for="checkbox0">
</label>
</div>
</td>
<td>♤</td>
<td>♤</td>
<td> </td>
<td>%<br>%<br>%</td>
</tr>
<tr>
<td>
<div class="checkbox2 m-0">
<input id="checkbox0" type="checkbox">
<label for="checkbox0">
</label>
</div>
</td>
<td>♤</td>
<td>♤</td>
<td> </td>
<td>%<br>%<br>%</td>
</tr>
<tr>
<td>
<div class="checkbox2 m-0">
<input id="checkbox0" type="checkbox">
<label for="checkbox0">
</label>
</div>
</td>
<td>♤</td>
<td>♤</td>
<td> </td>
<td>%<br>%<br>%</td>
</tr>
</tbody>
</table>
</div>
</div>
</body> @charset "UTF-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
margin-top: 100px;
margin-left: 100px;
}
.col {
border-collapse: collapse;
}
button {
background-color: dodgerblue;
padding: 8px 30px !important;
width: 120px;
font-size: 14px;
color: white;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border: 0px solid transparent;
float: left;
}
button:hover {
background-color: skyblue;
}
.col-100 {
width: 100%;
}
table {
text-align: center;
font-size: 14px;
}
th {
background-color: dimgrey;
border: 1px solid rgba(224, 224, 224, 0.2);
height: 34px;
color: white;
font-size: 12px;
}
tr,
td {
padding: 4px 0px;
border: 1px solid rgba(224, 224, 224, 0.2);
font-size: 12px;
}
반응형
'JavaScript' 카테고리의 다른 글
| [자바스크립트 기초] 함수로 인디언이름 반환하기 (0) | 2020.12.14 |
|---|---|
| 무작위로 6글자 문자열 생성하기 (0) | 2020.12.10 |
| [html/css] Javascript - 마우스를 따라다니는 아저씨 눈 자바스크립트로 만들기/onmousemove, eventclientX, eventclientY, window.innerHeight, window.innerWidth (0) | 2020.12.05 |
| [html/css] input태그에 글 입력 시 아이콘/이미지 활성화 시키기 (0) | 2020.11.17 |
| [Javascript]기초문법 html/css/jsp 자바스크립트로 구구단 테이블 만들기 (0) | 2020.11.11 |
