javascript - 使用按钮/jquery 更改表的 css 样式

Question

问题是:

我希望能够“打开和关闭”此 html 表格上的网格。我不确定为什么 css 没有接管，除了我拥有的表格的原始 css 不允许更改。

这是 fiddle

这是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 以覆盖声明的原始 css 或解释为什么此方法不起作用的任何建议？

谢谢!

Answer 1

使用 CSS class 它比 .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