Использование jQuery для поиска следующей строки таблицы

Теги показать и скрыть не нужны:

$(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();
    });
});

edit: Хорошо, я добавил код для изменения изображения. Это всего лишь один из способов сделать это. Я добавил класс к атрибуту expand в качестве тега, когда следующая за ним строка скрыта, и удалил его, когда строка была показана.

Вот как изображения настраиваются в 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;");
    }
}

Попробуй это...

//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');
   }
}

Надеюсь это поможет.

Никто не любит тернарный оператор? :) Я понимаю соображения удобочитаемости, но по какой-то причине мне хочется написать это как:

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

... и не имеет никаких посторонних занятий.

Недавно мне пришлось решить эту проблему, но в моей было несколько вложенных таблиц, поэтому мне нужна была более конкретная и безопасная версия javascript. Моя ситуация была немного другой, потому что у меня было содержимое td и я хотел переключить следующий TR, но концепция остается той же.

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

Ближайший захватывает ближайший TR, в данном случае первого родителя. Вы можете добавить туда класс CSS, если хотите быть предельно конкретным. Затем я указываю захват следующего TR с классом расширяемого объекта для этой кнопки. Затем я просто fadeToggle(), чтобы переключить, отображается он или нет. Указание селекторов действительно помогает сузить круг задач, которые он будет обрабатывать.