使用 JQuery 在 table 中单击 tr 时创建弹出窗口

Question

我在 jsp 中有一个 table，我想在单击 table 时创建一个弹出窗口 window。包括一个带有代码的 jsfiddle，并尝试将 java 脚本与特定行连接，但没有成功创建弹出窗口。

此 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/

谢谢。

Answer 1

在您的函数 "display" 中，event.target 将为您提供对用户点击的任何内容的引用：

function display(test) {
    alert(event.target.outerHTML);
}

https://jsfiddle.net/y2y1w24L/2/

您应该能够使用它来显示适当的弹出窗口。

Answer 2

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

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

Answer 3

希望对您有所帮助

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';
}

和CSS为此 #btn关闭 { 背景：none 重复滚动 0 0 #dd2904；边框：1px 实心#c13031；白颜色; 字体大小：18px；字体粗细：粗体；边距：5px；填充：0 1px 4px；位置：绝对；右：10px；顶部：0； } #btnClose:悬停 { 背景：none 重复滚动 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%;
    }

使用 JQuery 在 table 中单击 tr 时创建弹出窗口

Using JQuery to create a pop-up when clicking on a tr in a table

html

javascript

css

popup