我有一个简单的网页，对于每一行数据，我可以弹出一个带有该行详细信息的 jQuery UI 对话框。由于子查询中可以有多行，因此表是最佳选择。结果是我得到一个空对话框，并且该 div 中包含的表格（用于对话框的表格）出现在页面底部，无论是否单击该行来激活对话框。其他一切都完美无缺，点击事件，弹出对话框，为 div 传递正确的 id，一切都很完美。
但是 dang 表（对话框内的一个，具有“inner-table”类）立即出现在页面底部。
HTML 是在 Groovy 中使用 HTMLMarkupBuilder 创建的，生成的 HTML 如下所示：
<html>
<head>
<title>NAS Execution Groovy Servlet</title>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery-ui-1.8.23.custom.min.js'></script>
<script type='text/javascript' src='js/jquery.dataTables.min.js'></script>
<script type='text/javascript' src='js/executions.js'></script>
<link rel='stylesheet' type='text/css' href='css/jquery.dataTables_themeroller.css'></link>
<link rel='stylesheet' type='text/css' href='css/jquery-ui.css'></link>
<link rel='stylesheet' type='text/css' href='css/nas.css'></link>
</head>
<body>
<div id='results' class='execution-results'>
<p id='rpt-header'>
<span class='rpt-header-txt'>Backup Schedule Report for </span>
<span class='rpt-header-asset'>ret2w089n1t1</span>
</p>
<table id='nas-table'>
<thead>
<tr class='table-header'>
<th class='hidden'>Backup ID</th>
<th>Schedule Name</th>
<th>Backup Product</th>
<th>Size Mb</th>
<th>Start Time</th>
<th>Duration</th>
<th>Expiration Date</th>
<th>Mon 17</th>
</tr>
</thead>
<tbody>
<tr class='row'>
<td class='hidden'>12345678</td>
<td class='row-data'>null</td>
<td class='row-data'>Product One</td>
<td id='size-mb' class='row-data'>601.31</td>
<td class='row-data'>00:09:03</td>
<td class='row-data'>158 secs</td>
<td class='row-data'>2012-10-01</td>
<td class='row-center'>
<img id='success-fail' src='img/success.gif'></img>
</td>
</tr>
<tr class='row'>
<td class='hidden'>23456789</td>
<td class='row-data'>PolicyName</td>
<td class='row-data'>Product Two</td>
<td id='size-mb' class='row-data'>995.92</td>
<td class='row-data'>20:09:00</td>
<td class='row-data'>191 secs</td>
<td class='row-data'>2012-10-01</td>
<td class='row-center'>
<img id='success-fail' src='img/success.gif'></img>
</td>
</tr>
<div id='dialog-23456789' class='details-dialog'>
<table class='inner-table'>
<thead>
<tr>
<th>JOB_TYPE_NAME</th>
<th>VENDOR_STATUS_NAME</th>
<th>KILOBYTES</th>
</tr>
</thead>
<tbody>
<tr>
<td>Incr Backup</td>
<td>Successful</td>
<td>1019821</td>
</tr>
</tbody>
</table>
</div>
</tbody>
</table>
</div>
</body>
</html>
jQuery 非常简单；它使用单击行中的 id，并弹出一个对话框窗口。这很好用，但包含在该 div 中的表格实际上位于屏幕底部，甚至在单击任何内容之前：
$(document).ready(function() {
$('#nas-table').dataTable( {
"bJQueryUI": true,
"aaSorting": [[4, 'asc']]
} );
$('.row').live("click", function(){
var target = $(this);
var backupId = $(this).children(":first").html();
var thisId = '#dialog-' + backupId;
$(thisId).dialog(
{
title: "Backup Job Detail",
width: 800,
height: 450
}
);
$(thisId).dialog("open");
$(thisId).dialog("widget").position({
my: 'left top',
at: 'left bottom',
of: target
});
});
} );
起初，我以为 Groovy HTMLMarkupBuilder 在一切发生之前就输出了 DOM，但是当我查看源代码，将其复制到一个文件中，然后在我的浏览器中打开该文件时，我得到了相同的结果。
我将不胜感激。我之前问过这个问题，以防你想抱怨，但我不得不跟进 Groovy 代码中的一些其他潜在问题，我解决了这些问题。这个例子更完整，并且准确地代表了我的代码将要做什么。
布赖恩