html 表中的 Javascript 弹出窗口答案

【问题标题】：Javascript popup in html tablehtml 表中的 Javascript 弹出窗口
【发布时间】：2012-05-02 06:06:55
【问题描述】：

我有一个 10 x 10 的数据表，它是使用 html 标签创建的。如果可以为每个单元格创建一个 onClick 函数？我的意思是，如果我单击一个单元格，那么它会在一个警报窗口中给我它的值吗？如果是，那么如何？

【问题讨论】：

你使用 jquery 还是其他 javascript 框架？

【解决方案1】：

纯 JS - 假设 <table id="table1">:

window.onload=function() {
  var cells = document.getElementById('table1').getElementsByTagName('td');
  for (var i=0, n=cells.length;i<n;i++) {
    cells[i].onclick=function() { alert(this.innerHTML) }
  }
}

【讨论】：

【解决方案2】：

一个很好的例子可以在这里找到

HTML CODE: 

<div id='page-wrap'>

Your content goes here.

<a id='show' href='#'>show overlay</a>

JavaScript & JQuery:

$(document).ready(function() {

$("#show").click(function() {
    showPopup();
});

$("#popup").click(function() {

    $(this).hide();
    $("#mask").hide();

});

});

函数 showPopup() {

   // show pop-up

$("#mask").fadeTo(500, 0.25);

// show the popup
$("#popup").show();
}



 ---------------------------------------


 CSS CODE: 


* { margin: 0, padding 0}

#mask{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
display: none;
z-index: 10000;

}

#popup
{
width: 200px;
height: 200px;
margin: 10px auto; 
border: 1px solid #333;
background-color: #ffffdd;
cursor: pointer;
padding: 10px;
position: relative;
z-index: 10001;
display: none;
}


  [![enter image description here][1]][1]

【讨论】：

您应该添加一段代码来回答 SO 中的问题，而不是仅仅粘贴一个链接。
@JeremyW：感谢您的评论，我之前没有发布链接。我会确保自己发布代码而不是链接。