display 스타일 속성 사용하여 행 숨기기/보이기
display 스타일 속성 사용하여 행 숨기기/보이기
위 예제는 '오렌지 행 숨기기' 버튼을 클릭하면, 오렌지 행을 숨기고,
'오렌지 행 보이기' 버튼을 클릭하면, 오렌지 행을 다시 보여주는 예제입니다.
<script>
function hideRow() {
const row = document.getElementById('orange');
row.style.display = 'none';
}
function showRow() {
const row = document.getElementById('orange');
row.style.display = '';
}
</script>
<table id='fruits' border="1">
<tr><td>사과</td><td>apple</td></tr>
<tr id='orange'><td>오렌지<td>orange</td></tr>
<tr><td>바나나</td><td>banana</td></tr>
</table>
<input type='button'
value='오렌지 행 숨기기'
onclick='hideRow()' />
<input type='button'
value='오렌지 행 보이기'
onclick='showRow()' />
행 숨기기 - hideRow() const row = document.getElementById('orange');
id로 숨길 행을 선택합니다.
row.style.display = 'none';
선택한 행의 style.display 값을 'none'으로 설정합니다.
행 보이기 - hideRow()
const row = document.getElementById('orange');
행 숨기기와 같이, 다시 보여질 행을 id를 이용하여 선택합니다.
row.style.display = '';
선택한 행의 style.display 값을 ''으로 설정합니다.
<style>
.hover {background-color: #00f;color: #fff;}
</style>
<script>
$(document).ready(function(){
$('table tbody tr').hide();
$('table tbody').find('.studgroup').parent().show();
$('tbody tr').hover(
function(){
var tr = $('table tbody tr');
var rindex = $(this).parent().children().index(this);
for(var i = rindex; i<=rindex+5; i++){
$(tr[i]).show();
$('.test').text(rindex);
}$(this).addClass('hover');
},function(){
$('table tbody tr').hide();
$('table tbody').find('.studgroup').parent().show();
$(this).removeClass('hover');
}
);
});
</script>
<table border="1">
<thead>
<tr>
<th>Roll</th>
<th>Name</th>
<th>Marks</th>
</tr>
<tbody>
<tr>
<td colspan="3" class="studgroup" align="center">Roll 101-105</td>
</tr>
<tr>
<td>101</td>
<td>John</td>
<td>87</td>
</tr>
<tr>
<td>102</td>
<td>Tom</td>
<td>82</td>
</tr>
<tr>
<td>103</td>
<td>Smith</td>
<td>92</td>
</tr>
<tr>
<td>104</td>
<td>Kim</td>
<td>89</td>
</tr>
<tr>
<td>105</td>
<td>Cole</td>
<td>88</td>
</tr>
<tr>
<td colspan="3" class="studgroup" align="center">Roll 106-110</td>
</tr>
<tr>
<td>106</td>
<td>John</td>
<td>87</td>
</tr>
<tr>
<td>107</td>
<td>Tom</td>
<td>82</td>
</tr>
<tr>
<td>108</td>
<td>Smith</td>
<td>92</td>
</tr>
<tr>
<td>109</td>
<td>Kim</td>
<td>89</td>
</tr>
<tr>
<td>110</td>
<td>Cole</td>
<td>88</td>
</tr>
<tr>
<td colspan="3" class="studgroup" align="center">Roll 111-115</td>
</tr>
<tr>
<td>111</td>
<td>John</td>
<td>87</td>
</tr>
<tr>
<td>112</td>
<td>Tom</td>
<td>82</td>
</tr>
<tr>
<td>113</td>
<td>Smith</td>
<td>92</td>
</tr>
<tr>
<td>114</td>
<td>Kim</td>
<td>89</td>
</tr>
<tr>
<td>115</td>
<td>Cole</td>
<td>88</td>
</tr>
</tbody>
</thead>
</table>
