3

データの各行について、その行の詳細を含むjQueryUIダイアログをポップアップできる単純なWebページがあります。サブクエリには複数の行が含まれる可能性があるため、テーブルが最適です。

このための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 に答える