jquery突出顯示有扭曲的行

我不是很好的jQuery，但我試圖找出一種方法來突出顯示我的鼠標結束（如綠色）表中的行。該頁面上只有一個表格。我發現jQuery，將使此發生jquery突出顯示有扭曲的行

$("tr").filter(function() { 
    return $('td', this).length && !$('table', this).length 
}).css({ 
    background: "ffffff" 
}).hover(function() { 
    $(this).css({ 
     background: "#C1DAD7" 
    });},function() { 
    $(this).css({ 
     background: "#ffffff" 
    }); 
});

但我需要更進一步。如果我點擊一行，我希望該行突出顯示不同的顏色（紅色），然後懸停，並保持突出顯示紅色，除非另一行被點擊。所以懸停突出顯示行，除非它被點擊。點擊一行後，懸停仍然有效，不在點擊行上，點擊行保持紅色，除非另一行被點擊。有沒有辦法做到這一點。

我知道上面的顏色不匹配，紅色或綠色

來源

2014-03-31 jvcoach23

提供的jsfiddle –

聽起來像是你應該使用更多的CSS是什麼，以及使用JS只是切換被點擊州。 – Shomz

如果我是你，我會用類而不是直接造型：

$("tr").filter(function() { 
    return $('td', this).length && !$('table', this).length 
}).hover(function(){ 
    $(this).toggleClass('hover'); 
}).click(function(){ 
    $('.clicked').removeClass('clicked'); 
    $(this).toggleClass('clicked'); 
})

CSS

.hover{ 
    background : #C1DAD7; 
} 

.clicked{ 
    background : #f00; 
}

小提琴：http://jsfiddle.net/9wgGQ/

來源

2014-03-31 15:25:12

謝謝..問題..在你的小提琴例子中，點擊事件，其附加懸停或div ..只是試圖找出它用來了解更多的順序。另外，如果您願意，如果我需要在頁面加載中設置其中一行來使用或設置爲「已單擊」類，那麼有什麼好方法可以解決這個問題。我是否需要爲div命名，並且這樣做呢..好奇好的方法是什麼。謝謝 – jvcoach23

對於你的第一個問題，事件綁定到div（或tr在你的情況下）。 Jquery允許你用1個堆棧鏈接方法：'$（selector）.method1（）。method2（）...'。對於你的第二個問題，你可以選擇堆棧的第一個tr，並用'.trigger'來模擬一個點擊：'.click（代碼已經在這裏）.first（）。trigger（'click'）' –

我更瞭解你正在說...第一個（）。觸發器（'點擊'）我也明白。我一直在努力自己解決這個問題，但它變得相當醜陋，我必須有更好的方式來處理我正在做的事情。我的最終目標是什麼，我有一張4行的桌子。當有人點擊一行時，我還需要使用該行中隱藏輸入的值更新隱藏輸入，以便我可以存儲選定的值。通過同樣的措施，在頁面加載時，我需要突出顯示除第一行之外的行，並在其中拾取隱藏值。希望你仍然願意幫助分享。謝謝 – jvcoach23

$('tr').click(function(){ 
    $(this).parent().find('tr').css({background:'none'}); 
    $(this).css({ background: '#FF0000'}); 
});

用這個背景DEMO

來源

2014-03-31 15:23:02

看到這個小提琴：http://jsfiddle.net/jFIT/88r7p/

$("table tr").hover(
     function() { $(this).css({ background: "#C1DAD7" }); }, 
     function() { $(this).css({ background: "whitesmoke" }); } 
).click(function() { 
$('table tr.selected').removeClass('selected'); 
    $(this).addClass('selected'); 
});

來源

2014-03-31 15:24:01

jquery突出顯示有扭曲的行

回答

相關問題