Question

我的table看起来像这样：

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

我希望能够双击一行，然后显示一个新的弹出框＆＃39;其中包含一个新的表格格式。

从Open link when doubleclicking on table row with jQuery开始，我将此作为关于双击id的开头。但我不知道如何将链接转换为新的弹出框。

Answer 1

以下是在弹出框中显示新表结构的代码（我认为你的意思是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显示包含表格格式的新弹出框

1 个答案: