1st, 2nd 부분, 그리고 reset 버튼을 눌러보세요.
| 1st | 2nd | |
| 1st | abc | def |
| 2nd | ghi | jkl |
| 3rd | abc | def |
| 4th | ghi | jkl |
<style>
table.testTable {
border-collapse: collapse;
}
table.testTable td, tr {
border: 1px solid black;
padding: 5px;
}
</style>
<button id="resetbtn1">Reset</button>
<table class="testTable">
<tbody><tr>
<td></td>
<td id="vsel">1st</td>
<td id="vsel">2nd</td>
</tr>
<tr>
<td id="hsel">1st</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td id="hsel">2nd</td>
<td>ghi</td>
<td>jkl</td>
</tr>
<tr>
<td id="hsel">3rd</td>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td id="hsel">4th</td>
<td>ghi</td>
<td>jkl</td>
</tr>
</tbody></table>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("#resetbtn1").click(function () {
$("table.testTable tr,td").hide("fast");
$("table.testTable").hide("fast");
$("table.testTable").show("fast");
$("table.testTable tr,td").show("fast");
});
$("td[id='hsel']").click(function () {
$(this).parent().hide("fast");
});
$("td[id='vsel']").click(function () {
$("td:nth-child(" + (this.cellIndex + 1) + ")").hide("fast");
});
</script> '컴퓨터 프로그래밍 > 자바스크립트 장난' 카테고리의 다른 글
| jQuery 연습2 - 계산기 (0) | 2011/08/03 |
|---|---|
| jQuery 연습1 (0) | 2011/08/01 |
| 자바스크립트! 2 (1) | 2009/04/20 |
| 자바스크립트! (0) | 2009/04/03 |
