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

Question

I need to style the table as a zebra, styling even rows of tables, I used the css :nth-of-type(even) . 我需要将表格设置为斑马纹，甚至是表格的样式，我使用了css :nth-of-type(even) 。 But for example when I need to hide some of the stylized elements of the table is lost. 但是例如当我需要隐藏表格的某些程式化元素时就丢失了。 What's the easiest way to create a dynamic styling as a zebra for a table? 创建动态样式作为桌面斑马的最简单方法是什么？

<!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>

How can I dynamically change the style of the table? 如何动态更改表格的样式？

Сurrent result: 当前结果：
在此输入图像描述
Expected result: 预期结果：

Answer 1

When you hiding elemment, its still there (just hidden), so thats why you have this problem. 当你隐藏元素时，它仍然存在（只是隐藏），这就是为什么你有这个问题。 Ill suggest you to create simple script against css :nth-of-type(even) selectors. 我建议你创建一个针对css的简单脚本:nth-of-type(even)选择器。 First, two clases: 首先，两个分支：

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

Now crete function: 现在克里特岛功能：

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'); 
}

And then usage is simple. 然后使用很简单。 Call on document ready and when you're hiding element: 调用文档准备好以及何时隐藏元素：

refrestTableColoring( $('table') );

Answer 2

 table tr[@display=block]:nth-of-type(even){background: yellow;}

will this work? 这会有用吗？

Disclaimer:untested 免责声明：未经测试

Answer 3

instead of hide() you can use remove() for this. 而不是hide（）你可以使用remove（） 。 Write like this: 像这样写：

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

Check this http://jsfiddle.net/fhbgM/ 检查这个http://jsfiddle.net/fhbgM/

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

问题描述

3 个解决方案

解决方案1
1 已采纳 2013-01-22 13:29:55

解决方案2
0 2013-01-22 13:28:51

解决方案3
0 2013-01-22 13:34:50

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

问题描述

3 个解决方案

解决方案1 1 已采纳 2013-01-22 13:29:55

解决方案2 0 2013-01-22 13:28:51

解决方案3 0 2013-01-22 13:34:50

解决方案1
1 已采纳 2013-01-22 13:29:55

解决方案2
0 2013-01-22 13:28:51

解决方案3
0 2013-01-22 13:34:50