[英]Alternate table row color even if row is removed
即使我删除中间的一行,我也要为备用表行使用不同的颜色。
的HTML
<table border="1">
<tr><td>Row 1</td><td><a class="sam" href="#">Delete</a></td></tr>
<tr><td>Row 2</td><td><a class="sams" href="#">Delete</a></td></tr>
<tr><td>Row 3</td><td><a class="sam" href="#">Delete</a></td></tr>
<tr><td>Row 4</td><td><a class="sams" href="#">Delete</a></td></tr>
<tr><td>Row 5</td><td><a class="sam" href="#">Delete</a></td></tr>
</table>
jQuery的
$(function(){
update_rows();
$("a").click(function(){$(this).parent().parent().remove();update_rows();});
});
function update_rows()
{
$("tr:even").css("background-color", "#aaa");
$("tr:odd").css("background-color", "#eee");
}
的CSS
.sam
{
background-color:#FF00FF;
}
.sams
{
background-color:#0000FF;
}
上面的代码更改行颜色,但不更改具有链接的单元格。 请帮我解决问题
尝试:
<style>
tr:nth-of-type(even) {
background-color:#e3e3e3;
}
td:nth-of-type(odd) {
color:#d04242;
}
</style>
您还需要更改班级
function update_rows() {
$("tr:even").css("background-color", "#aaa").find('a').removeClass('sam').addClass('sams');
$("tr:odd").css("background-color", "#eee").find('a').removeClass('sams').addClass('sam');
}
演示: 小提琴
如果只想支持现代浏览器,请使用:nth- child-演示: Fiddle
tr:nth-child(odd) a {
background-color:#FF00FF;
}
tr:nth-child(even) a {
background-color:#0000FF;
}
tr:nth-child(odd) {
background-color:#aaa;
}
tr:nth-child(even) {
background-color:#eee;
}
然后
$(function () {
$("a").click(function () {
$(this).closest('tr').remove();
});
});
另请注意:使用$(this).closest('tr').remove()
代替$(this).parent().parent().remove()
使用CSS3作为样式:
<table id="whatever">
<tr><td>Row 1</td><td><a href="#">Delete</a></td></tr>
<tr><td>Row 2</td><td><a href="#">Delete</a></td></tr>
<tr><td>Row 3</td><td><a href="#">Delete</a></td></tr>
<tr><td>Row 4</td><td><a href="#">Delete</a></td></tr>
<tr><td>Row 5</td><td><a href="#">Delete</a></td></tr>
</table>
<style>
#whatever tr {
background-color: #AAA;
}
#whatever tr a {
background-color:#F0F;
}
#whatever tr:nth-child(odd) {
background-color: #EEE;
}
#whatever tr:nth-child(odd) a {
background-color:#00F;
}
</style>
<script>
$("#whatever a").click(function(){
$(this).closest("tr").remove();
});
</script>
现在,无需手动更新,不需要链接类或行背景。 请参阅更新的演示 。
与您的tr完美搭配。 链接颜色确实发生了变化,因为您没有使用jQuery定位它
我已经更新了小提琴您需要更新班级sam和sams
$("tr:even td a").removeClass("sam").removeClass("sams").addClass("sam");
$("tr:odd td a").removeClass("sam").removeClass("sams").addClass("sams");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.