невозможно скрыть и показать конкретную строку таблицы с одинаковыми именами идентификаторов внутри div с помощью jquery

0

Я создаю веб-сайт, и есть некоторые страницы, содержащие теги <div> в качестве обертки <table>. A <tr> каждой таблицы содержит <form> а другой <tr> содержит некоторые теги <a>. Я использую эти якорные теги, чтобы создавать кнопки для добавления функций скрытия и шоу. Всякий раз, когда некоторые новые данные извлекаются из базы данных, набор указанной структуры html создается динамически. Каждый <div> содержит один и тот же id и каждый <tr> также содержащий <form> назначенный один и тот же id. Ниже приведен мой пример html для лучшего объяснения.

HTML

<div class='static_archive'>   // First Wrapper
   <table>
      <tr>
         <td>Some data</td>
         <td>Some data</td>
         <td>
            <a id='show_hide_details' href='#'>Show/Hide Button</a>
         </td> 
      </tr>

      <tr id='form_container'> 
         <td colspan='3'>
            <form>
               <input type='text' name'first' />
               <input type='text' name'second' />
               <input type='text' name'third' /> 
            </form>
         </td> 
      </tr>  
   </table>
</div>

<div class='static_archive'>  // Second Wrapper
   <table>
      <tr>
         <td>Some data</td>
         <td>Some data</td>
         <td>
            <a id='show_hide_details' href='#'>Show/Hide Button</a>
         </td> 
      </tr>

      <tr id='form_container'> 
         <td colspan='3'>
            <form>
               <input type='text' name'first' />
               <input type='text' name'second' />
               <input type='text' name'third' /> 
            </form>
         </td> 
      </tr>  
   </table>
</div>

JQuery

$(document).ready(function(){

     $("#form_container").hide();

     $("#show_hide_details").click(function(){

          $("#form_container").toggle();

     });      
});

Как только страница загружается, $("#form_container").hide(); скрывает все <tr> содержащие <form>. Нажав кнопку hide/show с помощью эффекта переключения, скрывает и показывает все содержимое с одним и тем же идентификатором.

Я хочу показать только одну form в тот момент, когда нажата конкретная кнопка hide/show button. Как я могу контролировать такое поведение?

С новой записью новый DIV создается только с одной таблицей. И таблица содержит только одну форму. Строка таблицы, содержащая форму, должна быть скрытой/показать.

Вот jsfiddle с моей структурой кода jsfiddle

Каждое нажатие на hide/show должно влиять на соответствующую форму.

Я редактировал свой пост. Пожалуйста, смотрите сейчас.

  • 1
    Каждый <div> содержит один и тот же идентификатор, и каждый <tr> также содержит <form>, которому присвоен один и тот же идентификатор, этого никогда не произойдет
  • 0
    Вы не должны использовать один и тот же идентификатор для нескольких элементов, для этого предназначены классы.
Показать ещё 10 комментариев
Теги:

3 ответа

1

Вы можете использовать $(this) для переключения с определенным блоком.

$(this).closest('tr').next("#form_container").toggle();

Вы не должны использовать один и тот же идентификатор для нескольких элементов, назначать класс и использовать его

$(this).closest('tr').next(".form_container").toggle();
Поделиться
0

Я думаю, что вы хотите этого или, возможно, это поможет u.

У вас не может быть одинакового идентификатора для разных элементов управления. Таким образом, у вас может быть id, смотрящий на ту же строку

Вы можете использовать ^ здесь:

$(document).ready(function(){
     $("[id^='form_container']").hide();
     $("#show_hide_details").click(function(){
           $(this).parents().next("tr").toggle();
     });      
});

jsfiddle

Поделиться
  • 0
    Вот скрипка вашего кода http://jsfiddle.net/5U6KQ/2/ . При каждом нажатии кнопки «Скрыть / Показать» должна отображаться соответствующая форма. Пожалуйста, посмотрите.
  • 0
    @Rebbeca увидеть скрипку.Я сделал частично
0

Я предполагаю, что вы хотите сначала показать все их скрытые. Очевидно, вам нужно заменить id классом.

$(document).ready(function(){
    $(".form_container").hide();


     $(".show_hide_details").click(function(){

         $(this).parents("tr").next().toggle();

     });      
});
Поделиться
  • 0
    Да. Как только страница загрузится, все формы будут скрыты. При нажатии на соответствующую форму скрыть / показать покажет только свою форму. Я знаю, что могу сделать это с помощью встроенного jquery. Но пытаюсь сделать это, если у меня есть внешний файл JS.
  • 0
    Я сделал это с помощью встроенного JQuery.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню