Question

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

jQuery for this非常简单：

$('#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）替换表，它表现得很完美。

任何想法是什么交易？

布赖恩

Answer 1

将对话框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>

jquery-ui对话框表没有出现，但ul确实如此

1 个答案: