jQuery：突出顯示錶格行上覆選框更改事件

我有下表，其中包含每個行中的複選框。當複選框狀態發生變化時（選中/取消選中），相應的行需要以黃色突出顯示。我們如何使用jQuery實現它？我正在使用jQuery 1.4.1？「on」不受支持。jQuery：突出顯示錶格行上覆選框更改事件

注：我想學習jQuery。請不要建議任何第三方插件。我正嘗試通過手工編碼來了解它。

<html> 
<table class="commonGrid" cellspacing="0" id="detailContentPlaceholder_grdGarnishmentState" 
style="border-collapse: collapse;"> 
<thead> 
    <tr> 
     <th scope="col"> 
      <a > 
       Country Code</a> 
     </th> 
     <th scope="col"> 
      <a > 
       State</a> 
     </th> 
     <th scope="col"> 
      Independent Order Status 
     </th> 
     <th scope="col"> 
      Standard Order Status 
     </th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td> 
      USA 
     </td> 
     <td> 
      <span id="detailContentPlaceholder_grdGarnishmentState_lblState_0">Alaska</span> 
     </td> 
     <td> 
      <span class="independantOrder"> 
       <input id="detailContentPlaceholder_grdGarnishmentState_chkIndependentOrderStatus_0" 
        type="checkbox" name="ctl00$detailContentPlaceholder$grdGarnishmentState$ctl02$chkIndependentOrderStatus" 
        checked="checked" /></span> 
     </td> 
     <td> 
      <span class="standardOrder"> 
       <input id="detailContentPlaceholder_grdGarnishmentState_chkStandardOrderStatus_0" 
        type="checkbox" name="ctl00$detailContentPlaceholder$grdGarnishmentState$ctl02$chkStandardOrderStatus" 
        checked="checked" /></span> 
     </td> 
    </tr> 
    <tr style="background-color: #E5E5E5;"> 
     <td> 
      USA 
     </td> 
     <td> 
      <span id="detailContentPlaceholder_grdGarnishmentState_lblState_1">Arkansas</span> 
     </td> 
     <td> 
      <span class="independantOrder"> 
       <input id="detailContentPlaceholder_grdGarnishmentState_chkIndependentOrderStatus_1" 
        type="checkbox" name="ctl00$detailContentPlaceholder$grdGarnishmentState$ctl03$chkIndependentOrderStatus" /></span> 
     </td> 
     <td> 
      <span class="standardOrder"> 
       <input id="detailContentPlaceholder_grdGarnishmentState_chkStandardOrderStatus_1" 
        type="checkbox" name="ctl00$detailContentPlaceholder$grdGarnishmentState$ctl03$chkStandardOrderStatus" 
        checked="checked" /></span> 
     </td> 
    </tr> 
</tbody> 
</table> 
</html>

來源

2012-05-17 Lijo

你有2個checboxes ....如果兩者都檢查？ –

不得不喜歡那些ASP.NET Id morfs :) –

@MarkSchultheiss我一直在尋找一個cssclass把選擇器或東西在身份證...但無法找到沒有... :) –

假設：黃色，當一個複選框改變高亮顯示一行。

$("table").on("change", ":checkbox", function() { 
    $(this).parents("tr:first").css('background-color','yellow'); 
});

影響：如果行復選框發生變化，它會突出顯示。備註：一旦以黃色突出顯示，切勿改爲不突出顯示。

編輯：你可以使用你的CSS中的高亮類，如.highlight{background-color:yellow;}但是，在第二行，你需要刪除嵌入在那裏的背景顏色樣式，因爲這是更「特定」，並將始終覆蓋添加的類有變化的事件處理程序的.addClass('highlight');

以前的版本語法：

$("table").find(':checkbox').live('change', function() { 
    $(this).parents("tr:first").css('background-color','yellow'); 
});

：

$("table").find(':checkbox').change(function() { 
    $(this).parents("tr:first").css('background-color','yellow'); 
});

較慢的動態元素添加.live處理器210

編輯2：從1.4.1到1.4.4有很多事件管理變更。

看來改變事件並沒有爲1.4.1正確觸發 - 只會引發第二次改變。 SO，使用click事件，而不是：

jQuery('input').click(function() { 
    jQuery(this).parents("tr:first").css('background-color', 'yellow'); 
});

工作示例這裏：http://jsfiddle.net/vW9vQ/1/

BROKEN .change測試在這裏：http://jsfiddle.net/vW9vQ/

強烈推薦更新到這個東西的jQuery的當前版本。

來源

2012-05-17 12:52:26

我如何使它在jQuery 1.4.1中工作？「on」不受支持。 – Lijo

@Lijo - 我爲1.4.1添加了一個靜態內容和動態內容示例，它應該適合您。注意：編輯這些的第一篇文章的語法錯誤:( –

編輯的代碼適用於1.4.4，但它在1.4.1中不能正常工作。src =「ajax.aspnetcdn.com/ajax/jquery/jquery-1.4 .1.js「;任何解決方法？ – Lijo

試試這個：

http://jsbin.com/ozarov/3/edit

這也將在節省風格交替行背景色...

 $("table").on("click", ":checkbox", function() 
{ 
    if($(this).is(':checked')) 
    { 
     $(this).parents("tr:first").data('prevColor', $(this).parents("tr:first").css('background-color')); 
     $(this).parents("tr:first").css('background-color', 'yellow') 
    } 
    else 
    { 
     $(this).parents("tr:first").css('background-color', $(this).parents("tr:first").data('prevColor')) 
    } 
});

附：您可以根據您的筆記等闡述基於2項選中的複選框我的樣品...

來源

2012-05-17 12:30:36

謝謝。目前只有當我將一個未選中的框放入選中框時纔會突出顯示。它需要以任何方式工作 - 即。當我把一個複選框變成未勾選。我們該怎麼做呢？ – Lijo

但它一直是黃色的.... ????? –

我如何使它在jQuery 1.4.1中工作？「on」不受支持。 [一旦更改，它可以設置爲黃色] – Lijo

因爲大家都忽略了你對jQuery 1.4的使用。1，這裏是將工作的例子：

http://jsfiddle.net/applehat/F63Aj/1/

$("input:checkbox").click(function() 
{ 
    if($(this).is(':checked')) 
    { 
     $(this).parents("tr:first").data('prevColor', $(this).parents("tr:first").css('background-color')); 
     $(this).parents("tr:first").css('background-color', 'yellow'); 
    } 
    else 
    { 
     $(this).parents("tr:first").css('background-color', $(this).parents("tr:first").data('prevColor')); 
    } 
});

你會注意到的jsfiddle鏈接uncluding的jQuery 1.3 - 所以，如果工作在1.3，它應該很容易在1.4.1工作。

來源

2012-05-17 13:11:26 Applehat

它可以很好地適用於1.4.4，但它在1.4.1中不能正常工作。src =「http ：//ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js「。任何解決方法？ – Lijo

''只需將它放在您的標題中。= P – Applehat

我不允許在我的項目中使用1.4.1以外的任何版本 – Lijo

jQuery：突出顯示錶格行上覆選框更改事件

回答

相關問題