gpt4 book ai didi

javascript - 单击表格中的 tr 时使用 JQuery 创建弹出窗口

转载 作者:太空宇宙 更新时间:2023-11-03 23:20:12 25 4
gpt4 key购买 nike

我在 jsp 中有一个表格,我想在点击表格时创建一个弹出窗口。包括一个带有代码的 jsfiddle,并尝试将 javascript 与特定行连接,但没有成功创建弹出窗口。

This fiddle 是一个示例 - 我目前的代码包含一个 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/

谢谢。

最佳答案

您可以使用 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>

这是一种选择。您还可以查看此处的引导模式:http://getbootstrap.com/javascript/#modals

关于javascript - 单击表格中的 tr 时使用 JQuery 创建弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29002530/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com