功能與選定的錶行代理奇怪

Question

我使用了以下功能檢查基於行的背景顏色的變化選擇了什麼樣的錶行更改頁面。如果沒有選中，則會顯示一個對話框，表明存在錯誤。如果選擇了一行，那麼它應該允許您在單擊按鈕時進入編輯頁面。出於某種原因，這隻能工作大約一半的時間，並且即使在選擇一行時也顯示錯誤框。任何幫助，這將不勝感激

$('#edit').click(function() { 
       var selected = $('#deliverytable').find('tr').css("background-color"); 

       if(selected == "rgb(187, 187, 187)"){ 
        window.location = 'editd.html'; 
       }else{ 
        var $dialog = $('<div></div>') 
         .html('<p>Please select a table row</p>') 
         .dialog({ 
          autoOpen: false, 
          title: 'ERROR' 
         }); 
        $dialog.dialog('open'); 
       } 
      }); 

Answer 1

根據樣式屬性來確定一個用戶界面狀態是明顯的不好的做法。考慮addClass('ui-row-selected')例如，然後輕鬆用支票或hasClass('ui-row-selected')is('.ui-row-selected')

Answer 2

jQuery的CSS方法只返回「在匹配的元素集合的第一個元素的樣式屬性的值。」 - http://api.jquery.com/css/。因此，這行代碼沒有按照您的預期行事。

$('#deliverytable').find('tr').css("background-color"); 

這隻返回表中第一行的background-color。因此你的邏輯只是檢查那一行。如果你想檢查所有行，你必須在循環中執行這個邏輯。

$('#deliverytable').find('tr').each(function(index, row) { 
    if ($(row).css('backgroundColor') == "rgb(187, 187, 187)") { 
     //Change the window location 
    } else { 
     //Show the dialog 
    } 
});