想要在弹出窗口中包含 table

Question

我创建了一个 table，它会在单击单元格时打开一个弹出窗口：

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<h2>Results</h2>
<br/>
<table width="50%" >
<tr><th bgcolor=\'a6d7ed\'><b>Test Group</b></th><th bgcolor=\'a6d7ed\'><b>Pass</b></th><th bgcolor=\'a6d7ed\'><b>Fail</b></th><th bgcolor=\'a6d7ed\'><b>Error</b></th><th bgcolor=\'a6d7ed\'><b>Time</b></th><th bgcolor=\'a6d7ed\'><b>R</b></th>
</tr>
<tr><td>test</td>
<td><a href="#test_Pass" data-rel="popup" data-position-to="window" data-transition="fade" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">10</a></td>

现在，当我单击 10 时，我希望 table 在该值的弹出窗口中打开。我添加了以下代码来创建一个弹出窗口，其中包含单词 test 并且它有效：

<div data-role="popup" id="test_Pass">
   <div data-role="main" class="ui-content">
      <h2>Pass testcases from test</h2>
      <p>test</p> 
      <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">Back</a>
   </div>
</div>

现在我想要一个 table 在弹出窗口的核心，所以我更改了上面的代码以在段落标记中包含一个 table：

<div data-role="popup" id="test_Pass">
   <div data-role="main" class="ui-content">
      <h2>Pass testcases from test</h2>
         <p><table width="80%" >
         <tr><th bgcolor=\'a6d7ed\'><b>Test</b></th><th bgcolor=\'a6d7ed\'><b>Time</b></th><th bgcolor=\'a6d7ed\'><b>Result</b></th></tr>
         <tr><td>Test: Verifying correct response code is returned</td><td>0.569</td><td bgcolor=\'#00FF40\'></td></tr>
         </table></p>
      <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">Back</a>
   </div>
</div>

但是 table 现在出现在同一个页面上。没有弹出窗口。我唯一做的就是用 table 替换弹出段落文本。你能不这样做吗？我是否需要做其他事情才能让 table 进入弹出窗口？任何帮助表示赞赏

根据这里的要求是 fiddle - https://jsfiddle.net/rqp86v9x/

一个

Answer 1

如果这就是您的完整代码，那么由于语法错误（未闭合的标签），它无法正常工作。将其更改为：

<h2>Results</h2>
<br/>
<table width="50%">
  <tr>
    <th bgcolor=\ 'a6d7ed\'><b>Test Group</b></th>
    <th bgcolor=\ 'a6d7ed\'><b>Pass</b></th>
    <th bgcolor=\ 'a6d7ed\'><b>Fail</b></th>
    <th bgcolor=\ 'a6d7ed\'><b>Error</b></th>
    <th bgcolor=\ 'a6d7ed\'><b>Time</b></th>
    <th bgcolor=\ 'a6d7ed\'><b>R</b></th>
  </tr>
  <tr>
    <td>test</td>
    <td><a href="#test_Pass" data-rel="popup" data-position-to="window" data-transition="fade" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">10</a></td>
  </tr>
</table>


<div data-role="popup" id="test_Pass">
  <div data-role="main" class="ui-content">

    <h2>Pass testcases from test</h2>
    <table class='pop' width="80%">
      <tr>
        <th bgcolor=\ 'a6d7ed\'><b>Test</b></th>
        <th bgcolor=\ 'a6d7ed\'><b>Time</b></th>
        <th bgcolor=\ 'a6d7ed\'><b>Result</b></th>
      </tr>
      <tr>
        <td>Test: Verifying correct response code is returned</td>
        <td>0.569</td>
        <td bgcolor=\ 'a6d7ed\'></td>
      </tr>
    </table>
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">Back</a>

  </div>
</div>

Here is the JSFiddle demo

想要在弹出窗口中包含 table

Want to include a table in a popup

html

jquery

popup