3

我有一个简单的网页，对于每一行数据，我可以弹出一个带有该行详细信息的 jQuery UI 对话框。由于子查询中可以有多行，因此表是最佳选择。

jQuery 非常简单：

$('#dialog').dialog(
    {   
        autoOpen: false, 
        title: "Backup Job Detail",
        width: 400,
        height: 450
        }
);

$('.row').click( function(){
    $('#dialog').dialog("open");
});

（生成的）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'>MyAsset</span>
        </p>
        <table id='nas-table'>
            <thead>
              <tr class='table-header'>
                    <th>Schedule Name</th>
                    <th>Backup Product</th>
                    <th>Size Mb</th>
                    <th>Start Time</th>
                    <th>Duration</th>
                    <th>Expiration Date</th>
                    <th>Wed 14</th>
             </tr>

            </thead>
        <tbody>
          <tr class='row'>
              <td class='row-data'>schedule_name</td>
              <td class='row-data'>backupProduct</td>
              <td id='size-mb' class='row-data'>sizeStr</td>
              <td class='row-data'>start_time</td>
              <td class='row-data'>duration secs</td>
              <td class='row-data'>expiration_date</td>
              <td class='row-center'>
                <a class='tooltip' href='#'>
                  <img id='success-fail' src='img/partial.gif'></img>
                  <span class='classic'>Message returned is : message_text</span>
                </a>
             </td>
        </tr>
              <div id='dialog'>
                <table class='inner-table'>
                  <thead>
                    <tr>
                      <th>JOB_TYPE_NAME</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>Incr Backup</td>
                    </tr>
                  </tbody>
                </table>
              </div>
          </tbody>
        </table>
      </div>
   </body>
</html>

对话框永远不会出现，表格显示在最后。我缩短了要进入对话框的表格的大小，以防万一大小是一个问题，正如一位评论者发布的链接可能暗示的那样。

如果我用列表 (ul) 替换表格，它的行为就完美了。

有什么想法吗？

布赖恩

4

1 回答 1

0

将对话框 DIV 移动到“结果”DIV 下。你不能把你的对话 DIV 放在你的桌子中间，就像你有它一样。

<div id='results' class='execution-results'>
...
</div>

<div id='dialog'>
  <table class='inner-table'>
  <thead>
  <tr>
    <th>JOB_TYPE_NAME</th>
  </tr>
  </thead>

  <tbody>
  <tr>
    <td>Incr Backup</td>
  </tr>
  </tbody>
</table>
</div>
于 2012-11-18T01:42:42.317 回答