jQuery的用戶界面對話框表沒有出現，但UL確實

我有一個簡單的網頁，對於每行數據，我可以彈出一個jQuery UI對話框，該行的細節。由於在子查詢中可以有多行，所以表是最好的選擇。jQuery的用戶界面對話框表沒有出現，但UL確實

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）更換表，它完美的表現。

任何想法是什麼回事？

布賴恩

來源

2012-09-26 BrianGardner

這將有助於查看您點擊的表格+行的標記。這也有助於查看爲對話生成表格內容的代碼。你如何將結果標記添加到對話框中？ – jimp

也許這會幫助嗎？ http://stackoverflow.com/questions/7615261/jquery-ui-issues-with-tables-in-dialogs – Mutmatt

你的CSS中的'inner-table'類是否包含'display：none;'？ –

將你的對話框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-18 01:42:42 dgestep

jQuery的用戶界面對話框表沒有出現，但UL確實

回答

相關問題