Как я могу добавить диалог JQuery для каждой строки в таблице HTML

Question

Я генерирую HTML-таблицу с помощью PHP (используя платформу codeigniter) и пытаюсь добавить ссылку, которая откроет диалоговое окно jquery с некоторой информацией, относящейся к этой строке.Сортировка по типу ссылки «Дополнительная информация», которая просто открывает диалоговое окно.

Когда я добавляю div диалога в эту строку и инкапсулирую в него необходимую информацию, он разбивает таблицу (не может иметь div в таблице).

Плюс, кажется, мне нужно добавить неизвестное количество объявленных функций диалога jquery ... Я предполагаю, что нужна какая-то функция, а идентификатор элемента, открывающего диалог, кака также идентификатор для диалога будет передан функции.Но, похоже, что-то вроде этого должно быть встроено в jQuery.

Я что-то упускаю, и если да, то есть ли у кого-нибудь какие-нибудь советы, чтобы направить меня в правильном направлении?

Answer 1

Вставить информацию в виде метаданных в строку, а ...

<tr data-foo="additional data here" data-bar="even more data">…</tr>

И в вашем javascript небольшом волшебстве под названием .live():

$('#your_table .show_dialog').live('click', function(){
  var data_for_dialog = {
    foo: $(this).closest('tr').attr('data-foo'),
    bar: $(this).closest('tr').attr('data-bar')
  }

  show_dialog(data); // your own code to show the dialog
});

Где у вас есть <a> тег с классом "show_dialog". Обратите внимание, что это не очень эффективно, если у вас много атрибутов или они содержат данные, которые должны содержать переводы строк. Вы можете улучшить это, итерируя по каждому атрибуту , определенному для этого <tr>, и автоматически включая атрибуты, начинающиеся с data-. Это выходит за рамки этого вопроса.

Для отображения диалогового окна было бы достаточно чего-то подобного:

function show_dialog(data) {
  var $dialog = $('#dialog');
  for(var attr in data) {
    $dialog.find("." + attr).html(data[attr]);
  }
  $dialog.show();
}

<div id="dialog">
  <p class="data-foo"></p>
  <p class="data-bar"></p>
</div>

Это не проверено, но должно проиллюстрировать, что происходит достаточно хорошо.

Примечание. Вы можете определить пользовательские атрибуты в HTML5, если они имеют префикс «data-», следовательно, они появляются везде выше.

Answer 2

Я согласен с комментарием Томалака, чтобы использовать один блок и изменить содержание в нем.Если вы хотите сделать то, что, как мне кажется, вы пытаетесь сделать (не видя свой код), похоже, что вы могли бы поместить div диалога в тег <table> вместо тега <td>, это было бы первым деломcheck.

Во-вторых, чтобы открыть диалоговое окно, вы можете просто сослаться на div рядом со ссылкой:

<table>
  <tr>
    <td>
      <span class="MoreInfo">More info</span>
      <div>stuff for dialog</div>
    </td>
  </tr>
</table>

$(document).ready(function(){
    $('.MoreInfo').next().dialog({ autoOpen: false })
    $('.MoreInfo').click(function(){
         $(this).next().dialog('open');
    });
});

Редактировать: Извините, запутался Jquery, я предполагаю, что вы используете JqueryUI Dialog