如何为HTML表格中的每一行添加jQuery对话框

Question

我正在使用PHP（使用codeigniter框架）生成HTML表，并且尝试添加一个链接，该链接将打开一个jquery对话框，其中包含该行的特定信息。 一种“更多信息”类型的链接，可以简单地打开对话框。

当我将对话框div添加到该行并在其中封装所需的信息时，它会破坏表（表中不能有div）。

另外，似乎我需要添加一个声明数量不明的jquery对话框函数...我假设需要某种函数，并且打开对话框的元素的ID以及该对话框的ID传递给函数。 但是，似乎应该在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
});

您具有类“ show_dialog”的<a>标记的位置。 请注意，如果您有很多属性，或者其中任何一个包含需要包含换行符的数据，这都不会很有效。 您可以通过迭代在 <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

我同意Tomalak的评论，即使用一个框并更改其中的内容。 如果您想做我想做的事情（没有看到您的代码），看来您可能是将对话框div放在了<table>标记而不是<td>标记中，这是第一件事校验。

其次，打开对话框，您只需引用链接旁边的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对话框