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!

Satpal · Accepted Answer · 2014-05-22 18:14:29Z

1

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

answered May 22, 2014 at 18:14

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sjkm · Accepted Answer · 2014-05-22 18:12:25Z

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.

answered May 22, 2014 at 18:12

sjkm

3,9572 gold badges28 silver badges43 bronze badges

2 Comments

Jay Blanchard Over a year ago

Please post your code here so that it may be preserved for future SO visitors.

Crimpy Over a year ago

two great answers. The second one worked a bit better for me. Thanks!

Collectives™ on Stack Overflow

css style change for table using button/jquery

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related