Build table in html 5
Build table in html 5
HTML
<input type="button" id="btnExpCol" value="Collapse" />
<div id="divTest">
<table id="tblTest">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr class="Highlight">
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr class="Highlight">
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</div>
CSS
.Red {
color: red;
}
.Blue {
color: blue;
}
tblTest{
border:1px;
}
}
JavaScript
$(document).ready(function () {
//$('body').html('<table id="tblTest"><tr><th>Firstname</th><th>Lastname</th></tr><tr class="Highlight"><td>Peter</td><td>Griffin</td></tr><tr class="Highlight"><td>Lois</td><td>Griffin</td></tr></table>');
$('#btnExpCol').click(function () {
if ($(this).val() == 'Collapse') {
$('#divTest').stop().slideUp('3000');
$(this).val('Expand');
} else {
$('#divTest').stop().slideDown('3000');
$(this).val('Collapse');
}
});
//$('#tblTest').find('.Highlight').live('click', function () {
// $(this).toggleClass('Red');
//});
$('#tblTest').find('.Highlight').click(function () {
$(this).toggleClass('Red');
});
$('#tblTest').find('.Highlight').live({
mouseenter: function () {
$(this).addClass('Blue');
},
mouseleave: function () {
$(this).removeClass('Blue');
}
});
});