javascript 单击表中的 tr 时使用 JQuery 创建弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29002530/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using JQuery to create a pop-up when clicking on a tr in a table
提问by Slidetothewest
I have a table in a jsp and want to create a pop up window when clicking on a table. Included is a jsfiddle with code and an attempt to connect javascript with a specific row but have not had success creating a pop-up.
我在 jsp 中有一个表，想在单击表时创建一个弹出窗口。包括一个带有代码的 jsfiddle 和尝试将 javascript 与特定行连接但没有成功创建弹出窗口的尝试。
This fiddle is an example - code I have currently includes a java for loop creating each tr with specific info from a database.
这个小提琴是一个例子 - 我目前的代码包括一个 java for 循环，用数据库中的特定信息创建每个 tr。
<tr OnClick="display('test');">
<td><strong>showSpeed</strong></td>
<td>15</td>
<td>The speed of the show/reveal</td>
</tr>
<script>function display(test) {
//display a pop up?
}</script>
https://jsfiddle.net/y2y1w24L/1/
https://jsfiddle.net/y2y1w24L/1/
Thank you.
谢谢你。
回答by Felipe Correa
You can use JQuery UI to display a nice popup. This code was made merging your code with the example found here: http://jqueryui.com/dialog/
您可以使用 JQuery UI 来显示一个漂亮的弹出窗口。此代码将您的代码与此处找到的示例合并：http: //jqueryui.com/dialog/
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!--<link rel="stylesheet" href="/resources/demos/style.css">-->
</head>
<body>
<script>
function display(test) {
$("#dialog").dialog();
}
</script>
<table>
<tr onclick="display('test');">
<td><strong>showSpeed</strong></td>
<td>15</td>
<td>The speed of the show/reveal</td>
</tr>
</table>
<div id="dialog" title="Basic dialog" style="display:none">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
That's one option. You can also take a look at bootstrap modals found here: http://getbootstrap.com/javascript/#modals
这是一种选择。你也可以看看这里的引导模式：http: //getbootstrap.com/javascript/#modals
回答by Seamus
Inside your function "display", event.target will give you a reference to whatever the user clicked:
在您的函数“显示”中，event.target 将为您提供对用户单击的任何内容的引用：
function display(test) {
alert(event.target.outerHTML);
}
https://jsfiddle.net/y2y1w24L/2/
https://jsfiddle.net/y2y1w24L/2/
You should be able to use that to display the appropriate popup.
您应该能够使用它来显示适当的弹出窗口。
回答by A.D.
May this help you
可能这对你有帮助
var PopUP=document.createElement("div");
PopUP.className="PopUP";
PopUP.innerHTML="<div id='mainDivBack' style='display:block;'><div id='PopUpDiv' style='display:block;'>"+" Welcome"+ "<input type='button' value='x' id='btnClose' style='display:block;' onclick='popClose();'/></div></div>";
document.body.appendChild(PopUP);
function popClose() {
document.getElementById("btnClose").style.display = 'none';
document.getElementById("PopUpDiv").style.display = 'none';
document.getElementById("mainDivBack").style.display = 'none';
}
function display(test) {
PopUP.innerHTML="<div id='mainDivBack' style='display:block;'><div id='PopUpDiv' style='display:block;'>"+test+ "<input type='button' value='x' id='btnClose' style='display:block;' onclick='popClose();'/></div></div>";
document.getElementById("btnClose").style.display = 'block';
document.getElementById("PopUpDiv").style.display = 'block';
document.getElementById("mainDivBack").style.display = 'block';
}
and CSS for this #btnClose { background: none repeat scroll 0 0 #dd2904; border: 1px solid #c13031; color: white; font-size: 18px; font-weight: bold; margin: 5px; padding: 0 1px 4px; position: absolute; right: 10px; top: 0; } #btnClose:hover { background: none repeat scroll 0 0 #ff4565;
和 CSS #btnClose { background: none repeat scroll 0 0 #dd2904; 边框：1px 实心 #c13031; 白颜色; 字体大小：18px；字体粗细：粗体；边距：5px；填充：0 1px 4px；位置：绝对；右：10px；顶部：0；} #btnClose:hover { 背景：无重复滚动 0 0 #ff4565;
}
#PopUpDiv
{
background: none repeat scroll 0 0 lightgray;
border: 1px solid gray;
border-radius: 8px;
box-shadow: 1px 1px 12px 3px white;
font-family: "Lucida Console" ,arial;
height: 70px;
padding: 35px;
position: absolute;
width: 300px;
}
#mainDivBack
{
background: radial-gradient(lightgray, transparent) repeat scroll 0 0 transparent;
height: 100%;
left: 0;
padding: 20% 25%;
position: fixed;
top: 0;
width: 100%;
}
.Grid
{
background-color: #fff;
border: 1px solid #525252;
border-collapse: collapse;
color: #474747;
float: left;
font-family: Calibri;
width: 99%;
}
