css style change for table using button/jquery

Question

Here's the issue:

I want to be able to turn "on and off" the grid on this html table. I'm not sure why the css is not taking over other than the original css I have for the table isn't allowed to change.

Here's the fiddle

Here's the css:

td{ width:15px; height:15px;  font-size: 10px; text-align:center;  vertical-align:middle;  border-style:inset;   text-overflow:ellipsis;    white-space: nowrap; z-index:-1;}

and here's the jquery:

$('#hideGrid').click(function(){
    $('#tab td').css({ 'border-style': 'none !important'});
});

$('#showGrid').click(function(){
    $('#tab.td').css({'border-style': 'inset !important'});
});

Any advice on how to get the css with the button to override the declared original css or explain why this method is not working?

Thanks!

Answer 1

works now: http://jsfiddle.net/Nez7V/2/

your selector for the table td's was wrong:

$(document).ready(function(){
    var tableTds = $('table td');

    $('#hideGrid').click(function(){
        tableTds.css('border-style', 'none');
    });

    $('#showGrid').click(function(){
        tableTds.css('border-style', 'inset');
    });          
});

however, you can use the jquery function elem.css(attribute, value) if you only want to change one css-attribute.

Answer 2

Use CSS class it is fatser than .css() . Aslo not that in you fiddle you have not set ID of table.

HTML

 <table id="tab">

CSS , Here created a new class

td.no-border {
    border-style:none;
}

JS

$('#hideGrid').click(function () {
    $('#tab td').addClass('no-border'); //Added class
});
$('#showGrid').click(function () {
    $('#tab td').removeClass('no-border'); //Removed class
});

DEMO