CODEWITHSUNDEEP
javascriptjqueryhtml
user2871847
user2871847

Reputation:

Javascript make HTML Table Clickable with Pop Up Window

Hi currently I have a table which I would like for when a user clicks on a cell to open up a pop up window how would achieve this ? is there any sort of example/source code available. an example of a table cell looks like this: enter image description here

Basically I would like for when the user selects the mitsubishi cell within the HTML Table to open up a pop up window maybe with a tickbox or textbox etc. Any help would be great being new to Javascript etc

Upvotes: 1

Views: 14394

Answers (4)

George Fisher
George Fisher

Reputation: 3364

For a large table with dynamically-added rows, some of which have images and some that don't, the following adaptation of https://jsfiddle.net/chin/2y4s4/ has worked for me:

// click on a row to pop up the image
$('#table_id').on('click','tr', function(e) {

    var image = $(e.currentTarget).find('a').attr('rel');
    if (typeof image === "undefined") {
    } else {
        xOffset = 10;
        yOffset = 30;

        // dynamically create a <p> element with the image in it
        $("body").append("<p id='screenshot'><img src='"+ image  +"' alt='url preview' /></p>");
        $("#screenshot")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px")
                .fadeIn("fast");
    }
    e = null; 
});

// click on the image to get rid of it
$("body").on('click',"#screenshot", function(e) {$("#screenshot").remove()});

The CSS is 

/* pop-up box of image on row-click */
    #screenshot{
        position:absolute;
        border:1px solid #ccc;
        background:#333;
        padding:5px;
        display:none;
        color:#fff;
    }

And the dynamically-added table row is of the format

<tr><td>...</td><td style="display:none;">swamp_azalea.jpg<a href="https://georgefisher.com/flowers/" class="screenshot" rel="https://georgefisher.com/flowers/screenshots/swamp_azalea.jpg"></a></td></tr>

Upvotes: 1

Nithyanandhan M
Nithyanandhan M

Reputation: 1554

I made a popup box when clicking the td tab area. Use this reference link http://www.w3schools.com/tags/tag_map.asp

You should add the belowline inside canvas tag

onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';

i.e.,

<td id="myCanvas" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';" width="300" height="150" style="border:1px solid #d3d3d3;" >
Your browser does not support the HTML5 canvas tag.</td>

and create two div with id as 'light' and 'fade'

<div id="light" class="white_content"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a><p>Content goes here</p></div>

<div id="fade" class="black_overlay" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"></div>

and write the css like below.

<style type="text/css">
        .black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}

.white_content {
display: none;
position: fixed;
top: 10%;
left: 25%;
width: 50%;
height: 500px;
padding: 16px;
border: 13px solid #808080;
background-color: white;
z-index:1002;
overflow: auto;
}
    </style>

Upvotes: 0

Fiodor
Fiodor

Reputation: 806

I would recommend you to use jQuery.

First of all you have to give the cell an html property id like this:

<markup id="cell_id"></markup>

Then you have to make a div container which will be the block displayed after somebody clicks the cell.

<div id="div_id">some text/images/etc. to appear in the block</div>

Now Here's your jQuery code:

$('#cell_id').click(function(){$('#div_id').toggle();});

Remember to set the div's css property display to none!

#div_id {display:none;}

Also you should enclose all your jQuery code within this:

$(function({/*your jQuery code*/}));

This will make the code be run after the whole webpage is downloaded.

Sorry for formatting. I'm testing out the StackExchange mobile app and am not yet familiar with it.

Upvotes: 0

Jitendra Yadav
Jitendra Yadav

Reputation: 896

Try This one.

<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $( ".dialog" ).click(function(){        
        $('#dialog').html($(this).html()); 
        $('#dialog').dialog();
    });
  });
  </script>
  </head>
  <body>
  <table width="100%" border="1" cellpadding="1">
    <tr>
      <th scope="col" class="dialog" title="Example1"> <p>Example1</p>
      </th>
      <th scope="col" class="dialog" > <p>Example2</p>
      </th>
    </tr>
    <tr>
      <td class="dialog" ><p>Example3</p></td>
      <td class="dialog" ><p>Example4</p></td>
    </tr>
  </table>

  <div id="dialog" title="Basic dialog">

</div>
</body>
</html>

Upvotes: 2

Related Questions