Javascript CSS vs jQuery如何在没有其他插件的情况下创建动态表样式（zebra）？_Javascript_Jquery_Css_Html

Javascript CSS vs jQuery如何在没有其他插件的情况下创建动态表样式（zebra）？

javascript jquery css html

Javascript CSS vs jQuery如何在没有其他插件的情况下创建动态表样式（zebra）？,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我需要将表格设置为斑马样式，甚至设置表格行的样式，我使用css：nth of type（event）。但是，例如，当我需要隐藏表的一些样式化元素时，就会丢失。为桌子创建斑马形状的动态样式的最简单方法是什么 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery

我需要将表格设置为斑马样式，甚至设置表格行的样式，我使用css

：nth of type（event）

。但是，例如，当我需要隐藏表的一些样式化元素时，就会丢失。为桌子创建斑马形状的动态样式的最简单方法是什么

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <style type="text/css">
    table tr:nth-of-type(even){background: yellow;}
  </style>
  <script type="text/javascript">
    function hideRow(){
      $(".hidden").hide();
    }
  </script>
</head>
<body>
<center>
 <table cellspacing="0" border="1">
     <tbody>
    <tr class="table-row">
      <td>row1</td>
    </tr>
    <tr class="table-row">
      <td>row2</td>
    </tr>
    <tr class="table-row hidden">
      <td>row3</td>
    </tr>
    <tr class="table-row">
      <td>row4</td>
    </tr>
    <tr class="table-row">
      <td>row5</td>
    </tr>
    </tbody>
 </table>
 <input type="submit" onclick=" hideRow()" value="submit"/> 
 </center>
</body>
</html>


表tr:n类型（偶数）{背景：黄色；}
函数hideRow（）{
$（“.hidden”）.hide（）；
}
第1行
第2行
第3行
第4行
第5行

如何动态更改表格的样式

С当前结果：

预期结果：

这样行吗

免责声明：未经测试

当您隐藏元素时，它仍然在那里（只是隐藏），所以这就是您出现此问题的原因。我建议您针对css

：n个类型（偶数）

选择器创建简单脚本。首先，有两类：

.table_odd { color: yellow; } 
.table_even {color: white; }

现在，功能：

function refrestTableColoring( $tableSelector ) {
    $tableSelector.find('tr:odd:not(.hidden)').removeClass('table_even').addClass('table_odd');
    $tableSelector.find('tr:even:not(.hidden)').removeClass('table_odd').addClass('table_even'); 
}

而且用法也很简单。在文档准备就绪且隐藏元素时调用：

refrestTableColoring( $('table') );

您可以使用remove（）来代替hide（）。这样写：

$('input[type="submit"]').click(function(){
    $(".hidden").remove();
});

检查此

可能重复的感谢，此决定非常有用，只是对选择器稍作调整：“tr:not（.hidden）：odd”和“tr:not（.hidden）：偶”以及用户重置过滤器时发生的情况？

$('input[type="submit"]').click(function(){
    $(".hidden").remove();
});