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

Используя jQuery, как Вы связываете событие щелчка с ячейкой таблицы (ниже, class="expand") это изменится image src (который находится в нажатой ячейке - исходный, будет plus.gif, чередующийся с minus.gif), и hide/show строка сразу ниже его на основе того, имеет ли та строка класс hide. (покажите его, если это имеет класс, "скрываются" и скрываются, если это не имеет класса, "скрываются"). Я гибок с изменяющимися идентификаторами и классами в разметке.

Спасибо

Строки таблицы

<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>
15
задан Priyanga 18 October 2019 в 06:57
поделиться

4 ответа

Вы не нуждаетесь в шоу и скрываете теги:

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

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

18
ответ дан 1 December 2019 в 02:20
поделиться

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

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

Hope это помогает.

1
ответ дан 1 December 2019 в 02:20
поделиться

Это - то, как изображения настраиваются в Изменении 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;");
    }
}
-2
ответ дан 1 December 2019 в 02:20
поделиться

Ни у кого нет любви к тернарному оператору?:) Я понимаю соображения удобочитаемости, но по некоторым причинам это нажимает, чтобы я записал это как:

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

... и обладает преимуществом никаких посторонних классов.

9
ответ дан 1 December 2019 в 02:20
поделиться
Другие вопросы по тегам:

Похожие вопросы: