使用button / jquery對表進行css樣式更改

Question

這是問題所在：

我希望能夠在這個html表上打開“打開和關閉”網格。 我不確定為什么css沒有接管除了原來的css我不能改變。

這是小提琴

這是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;}

這是jquery：

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

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

有關如何使用按鈕來覆蓋聲明的原始css或解釋為什么此方法不起作用的任何建議？

謝謝！

Answer 1

現在有效： http ： //jsfiddle.net/Nez7V/2/

你的表td的選擇器是錯誤的：

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

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

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

但是，如果您只想更改一個css-attribute，則可以使用jquery函數elem.css(attribute, value) 。

Answer 2

使用CSS類比.css()更胖。 不是你在你的小提琴你沒有設置表的ID。

HTML

 <table id="tab">

CSS ，這里創建了一個新類

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