0
我有一個簡單的網頁，其中每行數據，我可以彈出一個jQuery UI對話框與該行的詳細信息。由於在子查詢中可以有多行，所以表是最好的選擇。結果是我得到一個空的對話框，並且包含在該對話框中的表格（對話框的對話框）出現在頁面底部，無論該行是否被點擊以激活對話框。其他的一切都很完美，點擊事件，對話框彈出，正確的ID傳遞，都是完美的。jQuery UI對話框 - 無法在對話框內容中插入表格
但是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，並彈出一個對話窗口。這工作正常，但包含在該分區表實際上是在屏幕的底部，點擊甚至在什麼：
$(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代碼中的其他潛在問題。這個例子更完整，並且代表了我的代碼將會做什麼。
布賴恩
我想知道我自己，但由於我正在構建HTML，所以我想我必須按照我的方式來完成。正如你所說，我將在Groovy代碼中將HTML添加到列表中並將其呈現在表格下。非常感謝您的幫助。 – BrianGardner