[英]Maintain Table Alternate Row Background after dynamically adding then hiding a new row
http://jsfiddle.net/bfa78/1/ http://jsfiddle.net/bfa78/1/
I have table in which i have alternate rows with different background colour using CSS: 我有一个表 ,其中使用CSS具有不同背景颜色的 备用行 :
table tr:nth-child(2n){
background:#f8f8f8;
}
My Application requires me to dynamically add and hide new rows to the table ( as shown in the Fiddle) . 我的应用程序要求我动态地向表中 添加和隐藏新行 (如Fiddle中所示)。
$('#addrow').on('click',function(){
$('#datagrid').find('tr:nth-child(2)').after(' <tr class="newrow"> <td>sa</td><td>asd</td><td>sdsa</td><td>sda</td> </tr>');
});
$('#hiderow').on('click',function(){
$('#datagrid').find('tr.newrow').fadeOut(400);
});
The problem is when i am adding a new row and then hiding that row , the alternate background pattern breaks . 问题是当我添加新行然后隐藏该行时 ,备用背景图案会中断 。 Is there a way I can fix it?
有办法解决吗? I tried giving different classnames to the original rows and applying the above css on them but its not helping.
我尝试给原始行赋予不同的类名,并在它们上应用上面的CSS,但这无济于事。
You're setting the alternate style only to the rows that have the original
class. 您仅将替代样式设置为具有
original
类的行。 But you're adding rows with a different class name ( newrow
). 但是,您要添加具有不同类名(
newrow
)的行。
Change from: 更改自:
table tr.original:nth-child(2n){
to general rows selection: 常规行选择:
table tr:nth-child(2n){
you need to apply colors with javascript 您需要使用javascript应用颜色
function applycolors(){
var trs= $('#datagrid tr:not([style="display: none;"])') ;
for(var i=0;i<trs.length;i++){
if(i%2!=0){
trs[i].style.background="#f8f8f8";
}else{
trs[i].style.background="#ffffff";
}
}
}
http://jsfiddle.net/vikramjakkampudi/bfa78/6/ http://jsfiddle.net/vikramjakkampudi/bfa78/6/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.