更改使用jQuery

我需要你們的幫助下，單擊錶行的我如何使用jQuery的顏色，更改使用jQuery

，

更改選定行的在我的表的背景顏色（在這個例子中，我們使用的CSS類「突出」

，如果被點擊再次在同一行，將其更改回其默認的顏色（白色）選擇的CSS類「nonhighlighted」

<!DOCTYPE html> 

<html> 

<head> 

<style type="text/css"> 

.highlighted { 
    background: red; 
} 
.nonhighlighted { 
    background: white; 
} 
</style> 

</head> 

<body> 

<table id="data" border="1" cellspacing="1" width="500" id="table1"> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
</table> 

</body> 

</html>

來源

2013-07-17 John Smith

從這裏開始：http://learn.jquery.com/ –

你有沒有作出任何努力對自己的這一方面。就像使用選擇器和點擊事件一樣？ –

.highlight { background-color: red; }

如果你想多選

$("#data tr").click(function() { 
    $(this).toggleClass("highlight"); 
});

如果你想在表中只有1行同時被選中

$("#data tr").click(function() { 
    var selected = $(this).hasClass("highlight"); 
    $("#data tr").removeClass("highlight"); 
    if(!selected) 
      $(this).addClass("highlight"); 
});

還要注意你的表標籤有2個ID屬性，你不能這樣做。

來源

2013-07-17 15:28:30

我有一張表格，並且對於每一行，請檢查截止日期列，如果它過去今天的日期，則使該行字體顏色爲紅色。我如何實現這一目標？ – SearchForKnowledge

創建適用該行顏色的CSS類，並使用jQuery開啓/關閉類：

CSS：

.selected { 
    background-color: blue; 
}

的jQuery：

$('#data tr').on('click', function() { 
    $(this).toggleClass('selected'); 
});

的第一次點擊將增加類（使背景顏色爲藍色），接下來點擊將刪除類，它恢復到不管它是什麼了。重複！

在你已經有兩個CSS類方面，我會改變.nonhighlighted類適用於默認表中的所有行，然後打開和關閉切換.highlighted：

<style type="text/css"> 

.highlighted { 
    background: red; 
} 

#data tr { 
    background: white; 
} 

</style> 

$('#data tr').on('click', function() { 
    $(this).toggleClass('highlighted'); 
});

來源

2013-07-17 15:19:23 Katstevens

這是選擇'td'，它應該選擇'tr'吧？ – SteveEdson

錯誤是的！謝謝你，我的懶惰打字敏銳spotter！ – Katstevens

如果在同一頁面上有其他表格，我會建議使用$（「＃data tr」）。 – aleation

這裏是一個可能的解決方案將爲您的表着色整行。

CSS

tr.highlighted td { 
    background: red; 
}

jQuery的

$('#data tr').click(function(e) { 
    $('#data tr').removeClass('highlighted'); 
    $(this).toggleClass('highlighted'); 
});

演示：http://jsfiddle.net/jrthib/HVw7E/2/

來源

2013-07-17 15:21:28 jrthib

你如何讓它不亮選最後一行，並改變新選定行的行顏色？ –

我更新了代碼。您將不得不刪除所有行上的類，然後將其添加到選定的行。 – jrthib

在你的CSS

：

.selected{ 
    background: #F00; 
}

在jQuery的

：

$("#data tr").click(function(){ 
    $(this).toggleClass('selected'); 
});

基本上你會創建一個類並將其從選定的行中添加/刪除。

順便說一句，你可以表現出更多的努力，在你的代碼的xD沒有CSS或jQuery的/ JS在所有

來源

2013-07-17 15:21:29 aleation

的jQuery：

$("#data td").toggle(function(){ 
    $(this).css('background-color','blue') 
},function(){ 
    $(this).css('background-color','ur_default_color') 
});

來源

2013-07-17 15:23:41 VishalDevgire

只突出顯示選中的單元格，不會取消選中的最後一行的選定行，當選中一個新行時 –

刪除表的第二id聲明：

<table id="data" border="1" cellspacing="1" width="500" **id="table1"**>

來源

2014-12-16 14:45:36

我不是JQuery的專家，但我也有同樣的情況，我能既成事實這樣的：

$("#data tr").click(function(){ 
    $(this).addClass("selected").siblings().removeClass("selected"); 
});

風格：

<style type="text/css"> 

.selected { 
    background: red; 
} 

</style>

來源

2016-04-19 16:16:50

.highlight { background-color：papayawhip; }

$("#table tr").click(function() {  
$("#table tr").removeClass("highlight"); 
      $(this).addClass("highlight"); 
});

來源

2016-05-03 10:47:54

更改使用jQuery

回答

相關問題