我有一个表，如下所示:
<table>
<thead>
<tr class="head">
<th>Test</th>
</tr>
</thead>
<tbody>
<tr class="body">
<td>Test</td>
</tr>
</tbody>
</table>
我希望能够双击一行，然后显示一个包含新表格格式的新“弹出框”。
来自Open link when doubleclicking on table row with jQuery我将此作为关于双击 id 的开头。但我不知道如何将链接转换为新的弹出框。
最佳答案
这是在弹出框中显示新表结构的代码(我认为您是通过消息框来表示的)::
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();
});
});
关于javascript - HTML <tr> 双击显示包含表格格式的新弹出框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35981418/