Question

嗨，目前我有一张桌子，当用户点击一个单元格打开一个弹出窗口时，我希望如何实现这一目标？是否有任何类型的示例/源代码可用。表格单元格的示例如下所示： enter image description here

基本上我想要当用户选择HTML表格中的三菱单元格打开一个弹出窗口时，可能带有一个复选框或文本框等。任何帮助都是很好的Javascript等新手

Answer 1

试试这个。

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

Answer 2

对于一个动态添加行的大表，其中一些有图像而另一些没有，https://jsfiddle.net/chin/2y4s4/的以下改编对我有用：

// 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()});

CSS

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

动态添加的表格行格式为

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

Answer 3

单击td选项卡区域时，我弹出了一个弹出框。使用此参考链接http://www.w3schools.com/tags/tag_map.asp

您应该在canvas标签

中添加以下内容

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

即，

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

并创建两个id为'light'和'fade'

的div

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

并编写如下的CSS。

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

Answer 4

我建议你使用jQuery。

首先，你必须给单元格一个像这样的html属性id：

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

然后你必须创建一个div容器，它将在有人点击单元格后显示该块。

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

现在这里是你的jQuery代码：

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

请记住将div的css属性显示设置为none！

#div_id {display:none;}

此外，您应该将所有jQuery代码包含在其中：

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

这将使代码在整个网页下载后运行。

抱歉格式化。我正在测试StackExchange移动应用程序并且还不熟悉它。

Javascript通过弹出窗口使HTML表格可单击

4 个答案: