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

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

Share Improve this question asked Jun 12, 2014 at 12:32 user2871847

I guess searching this site for previous similar questions would have avoided duplicity: Pass data to popup of table, Popup when clicking canvas, popup in a popup, popup on a button, ... This Q is well phrased and formatted and maybe should be preserved? – cfi Commented Jun 12, 2014 at 13:10

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

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./ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery./jquery-1.10.2.js"></script>
  <script src="http://code.jquery./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>

For a large table with dynamically-added rows, some of which have images and some that don't, the following adaptation of https://jsfiddle/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./flowers/" class="screenshot" rel="https://georgefisher./flowers/screenshots/swamp_azalea.jpg"></a></td></tr>

I would remend 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.

I made a popup box when clicking the td tab area. Use this reference link http://www.w3schools./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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - Javascript make HTML Table Clickable with Pop Up Window - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)