Question

我正在使用PHP生成一个HTML表（使用codeigniter框架），我正在尝试添加一个链接，该链接将打开一个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
});

你有一个<a>标签，其中包含“show_dialog”类。请注意，如果您有许多属性或其中任何属性包含需要包含换行符的数据，则效率不高。您可以通过<tr>上定义的iterating over each attribute来改善此问题，并自动包含以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 Dialog

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

2 个答案: