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

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

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

另外，似乎我需要添加未知数量的jquery对话框函数声明。。。我假设需要某种函数，打开对话框的元素的ID以及对话框的ID将传递给函数。但是，jQuery中似乎应该有这样的东西

---

我是否遗漏了什么，如果遗漏了，有没有人能给我一些提示，让我指出正确的方向？

我同意托马拉克的意见，即使用一个方框并更改其中的内容。 如果您想做我认为您正在尝试做的事情（没有看到您的代码），那么您可能会将对话框div放在

标记中，而不是

标记中，这将是第一件要检查的事情

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

更多信息
对话材料
$（文档）.ready（函数（）{
$（'.MoreInfo'）.next（）.dialog（{autoOpen:false}）
$（'.MoreInfo'）。单击（函数（）{
$（this.next（）.dialog（'open'）；
});
});

---

编辑：抱歉把Jquery搞砸了，我假设您正在使用

将信息作为元数据嵌入行中，一个

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

您在该

上定义了

，并自动包含以
数据-
开头的属性。但这超出了这个问题的范围

就显示对话框而言，这样的内容就足够了：

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>

函数显示对话框（数据）{
var$dialog=$（“#dialog”）；
for（数据中的var attr）{
$dialog.find（“.”+attr.html（数据[attr]）；
}
$dialog.show（）；
}



这是未经测试的，但足以说明发生了什么

注意：您可以在HTML5中定义自定义属性，只要它们的前缀是“data-”，因此上面到处都会显示这些属性。
为什么不根据需要创建一个对话框，并根据相关行用正确的信息填充它呢？像这样创建x对话框似乎效率很低。您能给出一个屏幕截图或url示例，说明您在说dialog时的想法吗？谢谢Kumu，我认为这将完全符合我的需要…但是，有点问题。单击（函数（）{…我知道它在上一条语句中正确设置了对话框，因为如果我将autoOpen设置为True，它会在页面加载完成时触发。但是，我无法理解为什么单击时对话框不会打开。如果我在其中放置警报，它会触发（'MoreInfo'）。单击，这样我就知道它正在捕获事件。有什么建议吗？哦，是的，我正在使用jQueryUI对话框。我不建议这样做。您正在文档就绪状态下初始化数百个jQuery UI对话框，这将影响性能。更不用说，这不是很优雅。是的，我确实注意到加载时间有一定的延迟当对话框被初始化时。我根本不是jQuery或Javascript专家，也不知道如何让你的答案中的技术发挥作用。今晚我再给它一次机会。在非HTML 5浏览器中工作会有问题吗？一点也不会。大多数HTML5的实际规范改变了brows中现有的功能ers和标准化行为。这是其中的一个领域。您可以自由使用任何您喜欢的属性，但数据前缀的属性将不会在未来的行为中发生变化。这非常好！进行了一些轻微的修改，但在那之后工作得非常完美…谢谢！！
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>