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


15

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

Благодаря

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

<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> 
18

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

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

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

  0

Разве вы не просто любите jQuery? Вместо '$ (this) .find ('img')' вы можете использовать несколько более сжатый '$ ('img', this)'. Функция '$' принимает второй параметр. Когда он используется, jQuery ищет только селектор в контексте 'this'. 23 сен. 082008-09-23 20:30:33

  0

Спасибо, я внес эти изменения. 23 сен. 082008-09-23 20:37:07

  0

, который немного напоминает мне. все остальное читается слева направо, тогда как с использованием этого синтаксиса вы должны читать справа налево. они оба имеют тот же эффект, поэтому я обычно стараюсь придерживаться стиля $ (this) .find (...). 20 окт. 082008-10-20 01:42:46

+2

Интересно, есть ли разница в производительности. Например. Использует ли один или другое другой код для выполнения внутри jQuery? 06 мар. 092009-03-06 19:06:15


-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;"); 
    } 
} 
  0

Если вы отпечатаете каждую строку кода на 4 пробела, она появляется как блок «код», показывающий открывающие теги и т. Д. 23 сен. 082008-09-23 20:28:27


1

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

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

Надеется, что это помогает.

  0

спасибо, это полезный код .... но $ ('. Expand img') будет влиять на все изображения в классе expand ... Я просто хочу создать одно изображение в ячейке таблицы (<td>) 23 сен. 082008-09-23 20:36:57


9

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

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

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


3

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

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

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