Question

我有一个简单的网页，对于每一行数据，我可以弹出一个jQuery UI对话框，其中包含该行的详细信息。由于子查询中可以有多行，因此表是最佳选择。结果是我得到一个空对话框，并且该div中包含的表（对话框中的表）出现在页面底部，无论是否单击该行以激活对话框。其他一切都很完美，点击事件，对话框弹出窗口，div正确id的传递，都是完美的。

但是dang表（对话框里面的那个，带有'inner-table'类）出现在页面的底部，就在蝙蝠之外。

HTML是使用HTMLMarkupBuilder在Groovy中创建的，生成的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，然后弹出一个对话框窗口。这工作正常，但该div中包含的表实际上位于屏幕的底部，甚至在点击任何内容之前：

$(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代码中的其他一些潜在问题，我已经解决了。这个例子更完整，并且完全代表了我的代码将做的事情。

布赖恩

Answer 1

问题是你有一个嵌套在TR和TD之外的表中的div，这将导致渲染和DOM有点错误。如果你调整html使其类似于这样的东西它将起作用：

<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>
          </tbody> 
      </table>
          <div id='dialog-23456789' class='details-dialog' style="display:none;"> 
            <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>         
    </div>

诀窍是将div移到父表之外，你还需要在详细信息表上设置display：none，否则它将在页面呈现时显示。

jQuery UI对话框 - 无法在对话框内容中插入表格

1 个答案: