HTML <tr> 双击显示包含 table 格式的新弹出框

Question

我有一个 table 看起来像这样：

<table>
    <thead>
        <tr class="head">
            <th>Test</th>
        </tr>
    </thead>
    <tbody>
        <tr class="body">
            <td>Test</td>
        </tr>
    </tbody>
</table>

我希望能够双击一行，然后显示包含新 table 格式的新 'popup-box'。

来自 Open link when doubleclicking on table row with jQuery 我得到这个作为关于使用 id 双击的开端。但我不知道如何将 link 转换为新的弹出框。

Answer 1

这是在弹出框内显示新 table 结构的代码（我想你的意思是 Messagebox）::

HTML:

<body>
<table>
<thead>
    <tr class="head">
        <th>Test</th>
    </tr>
</thead>
<tbody>
    <tr class="body">
        <td>Test</td>
    </tr>
</tbody>
</table>
   <section class="popbox group" id="popbox">
    <div class="popup">
     <div class="popup-inner">
       <p>This is a Message Box</p>
        <table>
         <thead>
          <tr class="head">
            <th>New Table</th>
          </tr>
         </thead>
         <tbody>
          <tr class="body">
             <td>New Table</td>
          </tr>
           </tbody>
         </table>
           <a class="close" href="#">x</a>
        </div>
      </div>
    </section>
</body>

CSS:

/* Outer */
.popup {
width:100%;
height:100%;
display:none;
position:fixed;
top:0px;
left:0px;
background:rgba(255,255,255,0.85);
}

/* Inner */
.popup-inner {
max-width:700px;
width:90%;
height: 600px;
padding:40px;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
background:#fff;
overflow: hidden;
}


/* Close Button */
.close {
width:30px;
height:30px;
padding-top:4px;
display:inline-block;
position:absolute;
top:15px;
right:15px;
transition:ease 0.25s all;
 -webkit-transform:translate(50%, -50%);
transform:translate(50%, -50%);
border-radius:1000px;
background:rgba(0,0,0,0.8);
font-family:Arial, Sans-Serif;
font-size:20px;
text-align:center;
line-height:100%;
color:#fff;
}

Jquery:

$(document).ready(function () {

//----- OPEN
  $('tr').on('dblclick', function(e)  {
       $('.popup').fadeIn(350);
        e.preventDefault();
    });

  //----- CLOSE
  $('.close').on('click', function(e)  {
        $('.popup').fadeOut(350);
        //$('#hidden').val(1);
        e.preventDefault();
    });
 });

HTML <tr> 双击显示包含 table 格式的新弹出框

HTML <tr> on double click show new popup box containing table format

html

javascript

jquery

double-click