使用JQuery查找下一個表格行

使用JQuery，如何將點擊事件綁定到表格單元格（下面的class =「expand」），它將更改圖片src（它位於單擊的單元格中 - 原始的be plus.gif，與minus.gif交替），並根據該行是否有一個「hide」類來隱藏/顯示緊接着它的下一行。（如果它有一類「隱藏」則顯示它，如果它沒有「隱藏」類則隱藏）。我很喜歡在標記中更改標識和類。使用JQuery查找下一個表格行

感謝

錶行

<tr> 
<td class="expand"><img src="plus.gif"/></td> 
<td>Data1</td><td>Data2</td><td>Data3</td> 
</tr> 
<tr class="show hide"> 
<td> </td> 
<td>Data4</td><td>Data5</td><td>Data6</td> 
</tr>

來源

2008-09-23 Jay Corbett

您不需要的顯示和隱藏標籤：

$(document).ready(function(){ 
    $('.expand').click(function() { 
     if($(this).hasClass('hidden')) 
      $('img', this).attr("src", "plus.jpg"); 
     else 
      $('img', this).attr("src", "minus.jpg"); 

     $(this).toggleClass('hidden'); 
     $(this).parent().next().toggle(); 
    }); 
});

編輯：好吧，我加入了代碼改變圖像。這只是一種方法。我在展開屬性時將一個類添加爲一個標記，當後面的行被隱藏並在顯示該行時將其刪除。

來源

2008-09-23 20:07:41 dbrien

難道你不喜歡jQuery嗎？而不是`$（this）.find（'img'）`你可以使用更簡潔的`$（'img'，this）`。 `$`函數接受第二個參數。當它使用jQuery只在`this`的上下文中查找選擇器。 – Lasar 2008-09-23 20:30:33

謝謝，我做了這些改變。 – dbrien 2008-09-23 20:37:07

，感覺有點落後於我。一切從左到右讀，而使用這種語法，你必須從右到左閱讀。它們都具有完全相同的效果，所以我通常試圖堅持$（this）.find（...）風格。 – nickf 2008-10-20 01:42:46

-2

這就是如何將圖像設置在HTML

<tr> 

<td colspan="2" align="center" 
<input type="image" src="save.gif" id="saveButton" name="saveButton" 
    style="visibility: collapse; display: none" 
    onclick="ToggleFunction(false)"/> 

<input type="image" src="saveDisabled.jpg" id="saveButtonDisabled" 
     name="saveButton" style="visibility: collapse; display: inline" 
     onclick="ToggleFunction(true)"/> 
</td> 
</tr>

更改onClick事件到你自己的函數，在JS在它們之間進行切換。

在

ToggleFunction(seeSaveButton){  
    if(seeSaveButton){ 
     $("#saveButton").attr("disabled", true) 
         .attr("style", "visibility: collapse; display: none;"); 
     $("#saveButtonDisabled").attr("disabled", true) 
           .attr("style", "display: inline;"); 
    }  
    else {  
     $("#saveButton").attr("disabled", false) 
         .attr("style", "display: inline;"); 
     $("#saveButtonDisabled") 
         .attr("disabled", true) 
         .attr("style", "visibility: collapse; display: none;"); 
    } 
}

來源

2008-09-23 20:08:42 Brad8118

嘗試......

//this will bind the click event 
//put this in a $(document).ready or something 
$(".expand").click(expand_ClickEvent); 

//this is your event handler 
function expand_ClickEvent(){ 
    //get the TR that you want to show/hide 
    var TR = $('.expand').parent().next(); 

    //check its class 
    if (TR.hasClass('hide')){ 
     TR.removeClass('hide'); //remove the hide class 
     TR.addClass('show'); //change it to the show class 
     TR.show();    //show the TR (you can use any jquery animation) 

     //change the image URL 
     //select the expand class and the img in it, then change its src attribute 
     $('.expand img').attr('src', 'minus.gif'); 
    } else { 
     TR.removeClass('show'); //remove the show class 
     TR.addClass('hide'); //change it to the hide class 
     TR.hide();    //hide the TR (you can use any jquery animation) 

     //change the image URL 
    //select the expand class and the img in it, then change its src attribute 
     $('.expand img').attr('src', 'plus.gif'); 
    } 
}

希望這有助於。

來源

2008-09-23 20:33:12 jckeyes

沒有人對三元運算符有任何的愛嗎？ :)我瞭解可讀性的考慮因素，但由於某種原因，它點擊我寫它爲：

$(document).ready(function() { 
    $(".expand").click(function() { 
      $("img",this).attr("src", 
       $("img",this) 
        .attr("src")=="minus.gif" ? "plus.gif" : "minus.gif" 
      ); 
      $(this).parent().next().toggle(); 
    }); 
});

......並有沒有無關的類的好處。

來源

2008-09-23 21:00:36

我最近不得不解決這個問題，但是我涉及到一些嵌套表格，所以我需要一個更具體，更安全的JavaScript版本。我的情況有點不同，因爲我有一個td的內容，並希望切換下一個TR，但這個概念保持不變。

$(document).ready(function() { 
    $('.expandButton').click(function() { 
     $(this).closest('tr').next('tr.expandable').fadeToggle(); 
    }); 
});

最靠近的是抓取最近的TR，在這種情況下是第一個父親。如果你想獲得非常具體的信息，你可以在那裏添加一個CSS類。然後，我指定要抓取下一個具有可展開類的下一個TR，這個按鈕的目標。然後我只需fadeToggle()它切換是否顯示。指定選擇器確實有助於縮小它將處理的內容。

來源

2012-04-10 12:53:23 PCasagrande

使用JQuery查找下一個表格行

回答

相關問題