即使行被移除，備用表的行顏色

即使當我刪除中間的行時，我也想爲不同的錶行創建不同的顏色。即使行被移除，備用表的行顏色

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

上面的代碼改變的行的顏色，但不具有鏈路的小區。請幫我解決這個問題

Demo

來源

2014-01-08 krishna

使用CSS和瀏覽器處理它。 – undefined

@krishna：http://stackoverflow.com/questions/3084261/alternate-table-row-color-using-css缺點是IE8不支持它。 –

@stackoverflow，這裏所需的解決方案與您指定的問題中提供的解決方案不同，因爲我希望這是在IE中工作，我需要更改具有超鏈接的單元格的類，這在此沒有回答。 – krishna

您需要更改類以及

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

演示：如果想支持Fiddle

使用:nth-child只有modern browsers - 演示： 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(); 
    }); 
});

還要注意：完全符合您的TR使用$(this).closest('tr').remove()代替$(this).parent().parent().remove()

來源

2014-01-08 12:26:58

謝謝man.you救了我。這就是我要找的。 – krishna

作品。鏈接顏色doesent改變，因爲你不會使用jQuery

瞄準它

來源

2014-01-08 12:27:52 visualex

Arun P Johny是對的 – visualex

我已經更新了小提琴你需要更新類薩姆和SAMS

 $("tr:even td a").removeClass("sam").removeClass("sams").addClass("sam"); 
     $("tr:odd td a").removeClass("sam").removeClass("sams").addClass("sams");

Check on fiddle

來源

2014-01-08 12:28:45 rrugbys

嘗試：

<style> 
    tr:nth-of-type(even) { 
     background-color:#e3e3e3; 
    } 

    td:nth-of-type(odd) { 
     color:#d04242; 
    } 
    </style>

來源

2014-01-08 12:30:05 shruti

使用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>

現在無需手動更新，無論是鏈接類還是行背景都不需要。見updated demo。

來源

2014-01-08 12:30:22 Bergi

即使行被移除，備用表的行顏色

回答

相關問題