jquery高亮顯示錶格行

我知道這裏有很多帖子，但我失去了爲什麼我的行不通。jquery高亮顯示錶格行

我想強調我的表中的一行：

<tr class="videorow"><td>...</td>...</tr> 
...

CSS：

.highlight { 
    background-color: #a8cb17; 
}

，最後我的jQuery：

基本上我想突出一個行並在選擇新行時清除。這是我無法弄清楚的第一部分。

另外我想突出顯示整行，但我不想讓最後一列觸發高亮。換句話說，您可以單擊該行的最後一列，但不會更改高亮。

喜歡的東西：

jQuery(document).on("click", ".videorow", function() { 

    //highlight table 
    jQuery(".highlight").removeClass("highlight"); 
    jQuery('table tr td:not(:last-child)').addClass("highlight"); 
});

在這兩個問題的任何指導表示讚賞。

編輯：輸入速度太快。語法錯誤只是我寫這個，而不是複製...現在修復

來源

2013-05-07 Tom

嘗試改變CSS：'.highlight { 背景顏色：＃a8cb17; }' 至： '.highlight td {background} color：＃a8cb17; }' – 2013-05-07 03:01:47

除了語法錯誤（你的第二個選擇器不在字符串中），這看起來很好。 – 2013-05-07 03:01:56

你目前的行爲是什麼？沒有提供工作副本，很難說出發生了什麼。 – xaxxon 2013-05-07 03:02:02

嘗試確保您的TD是在您的TR內，開始 - 認爲它可能只是您的問題，而不是您的代碼，錯誤。

<tr class="videorow"> 
<td>...</td> 
</tr>

然後，嘗試捕獲的<TD>的單擊事件 - 而不是在<TR>。 TD上的許多事情比TR上的更好。

$('document').on("click", "tr.videorow td", function(ev) { 
    console.log('click videorow event', ev); 
    // do whatever. 
});

如果你不能得到它的工作，嘗試只是「TD」捕捉直到你能得到的事件處理工作&日誌消息出現。（我假設你正在使用Chrome或Firefox。）

通過＃ID選擇器將事件處理程序附加到表中，而不是整個文檔，也可能更有效。

$('#MyTable').on(...);

AnhTú對CSS亮點的評論也是正確的。使它適用於TD的背景，而不是TR。你也可以試試！重要的，如果你仍然有問題（雖然看http://css-tricks.com/when-using-important-is-the-right-choice/獲取更多信息。）

.highlight td {background-color: #a8cb17 !important;}

感謝映！希望這可以幫助。

來源

2013-05-07 03:03:31

Hrmm，我迷路了。嘗試了你的建議。點擊事件沒有被觸發，但由於某種原因沒有突出顯示... – Tom 2013-05-07 03:26:18

調試 - 添加別的東西（比如說字體大小）到你的CSS中，檢查'檢查元素'是否被應用，檢查正在應用的jQuery選擇器它。 – 2013-05-07 03:30:57

奇怪的是，添加字體大小改變行字體的預期，但仍然沒有突出顯示...我把我的頭髮撕掉。 – Tom 2013-05-07 04:06:06

在代碼中，你寫道：

jQuery(table tr td:not(:last-child)).addClass("highlight");

它有語法錯誤。傳遞給jQuery函數的參數不是string。它改變了這一個：

jQuery('table tr td:not(:last-child)').addClass("highlight");

來源

2013-05-07 03:06:40

jQuery(document).on("click", "tr.videorow > td", function() { 
    var $this = jQuery(this); 

    // ignore clicks on last column 
    if ($this.is(":last-child")) return; 

    // unhighlight currently selected row 
    jQuery(".highlight").removeClass("highlight"); 

    // change the highlight of the row   
    $this.parent().addClass("highlight"); 
});

來源

2013-05-07 03:26:27 nbrooks

在行點擊使用以下命令：

$('.row_selected').removeClass('row_selected');$(this).toggleClass('row_selected');

來源

2014-04-01 08:53:36

jquery高亮顯示錶格行

回答

相關問題