2013-01-03 105 views
7

正如你最近在我的問題的歷史中可以看到的,我試圖理解Jquery/Javascript :)我碰到以下問題,並想提出它給你們。我注意到這是由inspect元素抓取的HTML,我不知道爲什麼style =「background-color:rgb(255,255,255);是否有..):Bootstrap表條紋不會改變顏色

<table class="table table-striped table-condensed" id="instance-table"> 
    <thead> 
     <tr id="checkrow"> 
      <th><input type="checkbox" id="checkall"></th> 
      <th>Column A</th> 
      <th>Column A</th> 
      <th>Column A</th> 
     </tr> 
    </thead> 
    <tbody id="instanceInnerContent"> 
     <tr style="background-color: rgb(255, 255, 255);"> 
      <td class="act"><input type="checkbox"></td> 
      <td>Value 1</td> 
      <td>Value 2</td> 
     </tr> 
      <tr style="background-color: rgb(255, 255, 255);"> 
      <td class="act"><input type="checkbox"></td> 
      <td>Value 1</td> 
      <td>Value 2</td> 
     </tr> 
    </tbody> 
</table> 

並使用下面的代碼以選擇該行或將其全部選中或選擇行點擊:

// if user clicks on checkbox with id="checkall" - all checkboxes are selected 
// and table row background is highlighted 
$('body').on('click', '#checkall', function() { 
    $('input:checkbox:not(#checkall)').prop('checked',this.checked); 
    if ($(this).is(':checked') == true) { 
     $("#instance-table").find('tr:not(#checkrow)').css("background-color","#ccc"); 
     //$('#instance-action').removeAttr('disabled'); 
    } else { 
     $("#instance-table").find('tr:not(#checkrow)').css("background-color","#fff"); 
     //$('#instance-action').attr('disabled', 'disabled'); 
    } 
}); 

// if user clicks on checkbox, diffrent than checkbox with id="checkall" , 
// then checkbox is checked/unchecked 
$('body').on('click', 'input:checkbox:not(#checkall)', function() { 
    if($("#checkall").is(':checked') == true && this.checked == false) { 
     $("#checkall").prop('checked',false); 
     $(this).closest('tr').css("background-color","#ffffff"); 
    } 
    if(this.checked == true) { 
     $(this).closest('tr').css("background-color","#ccc"); 
     //$('#instance-action').removeAttr('disabled'); 
     // function to check/uncheck checkbox with id="checkbox" 
     CheckSelectAll(); 
    } 
    if(this.checked == false) { 
     $(this).closest('tr').css("background-color","#ffffff"); 
     //$('#instance-action').attr('disabled', 'disabled'); 
    } 
}); 

// if user clicks, someware on table row, checkbox is checked/unchecked 
// and table row background is highlighted or not 
$('body').on('click', '#instance-table tbody tr', function() { 
    var this_row = $(this); 
    var checkbox = this_row.find('input:checkbox'); 
    if (event.target.type !== 'checkbox') {  
     if (checkbox.is(':checked') == false) { 
      checkbox.prop('checked', true); 
      this_row.css("background-color","#ccc"); 
      //$('#instance-action').removeAttr('disabled'); 
      CheckSelectAll(); 
     } else { 
      checkbox.prop('checked', false); 
      this_row.css("background-color","#fff"); 
      //$('#instance-action').attr('disabled', 'disabled'); 
      CheckSelectAll(); 
     } 
    }  
}); 

function CheckSelectAll() { 
var flag = true; 
$('input:checkbox:not(#checkall)').each(function() { 
    if(this.checked == false) 
    flag = false; 
    //console.log(flag); 
}); 
    $("#checkall").attr('checked',flag); 
} 

但不知何故條紋錶行沒有得到強調,如何來 雖然代碼已經在這裏,我也有一個問題,如果它不檢查checkall複選框我手動檢查每一行。當我手動檢查checkall複選框時,它會起作用,取消選中每個複選框,然後再次手動檢查每行。我找不到錯誤。

+0

所以你的問題是,'風格=「背景色:RGB(255,255,255);」'被添加到一行或該行未突出顯示? – kidwon

+0

很抱歉,真正的問題在於,在檢查該行時,由引導條帶化的行不會突出顯示。白色的作品。我只是不確定'style =「background-color:rgb(255,255,255);」'是否增加了問題。 – Tristan

+0

您還沒有將樣式添加到您的表格中,所以我認爲它會給它一個默認的白色背景! rgb(255,255,255)= white:P –

回答

8

看來自舉設置每個TD的背景色。因此,將tr設置爲背景顏色不起作用,即使您添加!important也是如此。我解決它通過添加一個類的每一個TD與所需的背景色

CSS:

.selected { background-color: #ddd !important; } 

代碼:

注:代碼是用來檢查是否一個功能的一部分點擊該行的第一個td內的複選框。

$(this).parent().parent().children('td').each(function() { 
$(this).addClass("selected"); 
}); 

它可能不是一個整潔的解決方案,但它的工作原理:)

+0

嗯,我一直在努力解決這個問題,以至於我看不到它被應用到TD上。謝謝。在我的情況下,我在表格行中添加了一個css類來指示該記錄是主要記錄。所以我重寫了下面的樣式:'.table-striped> tbody> tr.main-record:nth-​​child(odd)> td'。它工作正常。 –

2

我對造型表的體會是,你應該去行的單元格而不是行本身。

$(this).closest('tr td').css("background-color","#ffffff");

+0

heh,很好的試了一下,那隻適用於第一個td(這是複選框本身)但是它確實改變了,現在只適用於整行 – Tristan

+0

好吧,改變選擇器,讓你選擇如果你堅持使用'.closest()' – kidwon

+0

'$(()'),這個).closest('tr')。each('td').css(「background-color」,「#ccc」);'但這是無效的 編輯:如果你有更好的解決方案,請指出,所以我可以從中學習。 – Tristan

1

Working Fiddle

$('#checkall').on("change", function() { 
     if(!$(this).is(":checked")) { 
      $(".checkbox").each(function() { 
       $(this).prop("checked" , false); 
       $(this).parent().parent().css({ "background" : "#fff" }); 
      }); 
     } 
     else { 
      $(".checkbox").each(function() { 
       $(this).prop("checked" , true); 
       $(this).parent().parent().css({ "background" : "#ccc" }); 
      }); 
     } 
}); 
$(".checkbox").on("change", function() { 
    if ($(".checkbox:checked").length == $(".checkbox").length) { 
     $("#checkall").prop("checked" , true); 
     $(this).parent().parent().css({ "background" : "#ccc" }); 
    } 
    else { 
     if($(this).is(":checked")) { 
      $("#checkall").prop("checked" , false); 
      $(this).parent().parent().css({ "background" : "#ccc" }); 
     } 
     else { 
      $("#checkall").prop("checked" , false); 
      $(this).parent().parent().css({ "background" : "#fff" }); 
     } 
    } 
});​ 
+0

小提琴沒有在鉻和火狐工作 – matthy