Implementing a JQuery function to generate a popup whenever a user clicks on a table row (tr) in an

Question

Implementing a JQuery function to generate a popup whenever a user clicks on a table row (tr) in an

I am working on a JSP page that contains a table, and I want to implement a pop-up window functionality when clicking on a specific row in the table. I have attempted to use JavaScript to connect with the row but so far, I have not been successful in creating the desired pop-up.

Included below is an example code snippet from a JSFiddle I created. Currently, my code includes a Java for loop that generates each table row dynamically based on information retrieved from a database.

<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) {
        //code to display a pop-up goes here
    }</script>

JSFiddle link: https://jsfiddle.net/y2y1w24L/1/

Thank you for your help!

javascript html css popup

Answer 1

Answer №1

If you want to create a stylish popup, consider using JQuery UI. By combining your code with the example provided on http://jqueryui.com/dialog/, you can achieve a visually appealing result.

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

Another alternative is to explore bootstrap modals available at: http://getbootstrap.com/javascript/#modals

Answer 2

If you want to create a stylish popup, consider using JQuery UI. By combining your code with the example provided on http://jqueryui.com/dialog/, you can achieve a visually appealing result.

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

Another alternative is to explore bootstrap modals available at: http://getbootstrap.com/javascript/#modals

Answer 3

Answer №2

When utilizing the "display" function, event.target allows you to retrieve a reference to the element that was clicked by the user:

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

Visit this link for more information.

This reference can be used to showcase the appropriate popup content.

Answer 4

When utilizing the "display" function, event.target allows you to retrieve a reference to the element that was clicked by the user:

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

Visit this link for more information.

This reference can be used to showcase the appropriate popup content.

Answer 5

Answer №3

Here is a code snippet that could be helpful for 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';
}

Below is the CSS styling for this code:

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

#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%;
}

Answer 6

Here is a code snippet that could be helpful for 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';
}

Below is the CSS styling for this code:

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

#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%;
}

Implementing a JQuery function to generate a popup whenever a user clicks on a table row (tr) in an

Answer №1

Answer №2

Answer №3

Similar questions

utilize the Aspose library in Java to seamlessly convert HTML files into PowerPoint (

What is the best way to choose an HTML element in React?

sending data from a callback to an express router

Picture goes missing from slideshow

Typescript is struggling to locate a module that was specified in the "paths" configuration

Select a random option from the dropdown menu

What are some methods to secure my API keys within my React application?

Having trouble with your computed includes not working in Vue.js? Unsure of how to fix it?

Utilize AJAX to connect to a remote domain from an extension

A unique and dynamic design concept for my website: a zigzagging structure

Using CSS to enforce a specific height for text by overflowing its parent container horizontally

Steps for creating a fixed menu bar that remains stationary while scrolling

What is the best method for properly inserting images into a Vue Carousel 3D slider?

I'm encountering an issue where the database table in Postgres is not updating correctly while working with Node

Is there a way to utilize Javascript/JQuery to access and interpret PHP-generated HTML form data in a multi-dimensional array format?

Tips for implementing visual alterations using dynamically generated HTML scripts

Enclosing Material UI's DataGrid GridActionsCellItem within a custom wrapper component triggers a visual glitch if showInMenu is enabled

What is the best way to display a modal once an Ajax call is successful

What is the best way to replicate the Ctrl+A action on an element using jQuery or JavaScript?

Receiving Null Value Upon Asynchronous API Call Before Data Retrieval