如何在html表格中点击单元格显示单个弹出窗口 [英] How to show individual pop up window on click of cell in html table
本文介绍了如何在html表格中点击单元格显示单个弹出窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，
我试图在html table中弹出单个单元格。只有第一行单元格显示弹出...这是我的代码
< br $> b $ b
< ！ DOCTYPE html >
< html >
< head >
< meta 名称 = viewport content = width =设备宽度，initial-scale = 1 >
< link rel = stylesheet href = http：// code .jquery.com / mobile / 1.4.2 / jquery.mobile-1.4.2.min.css >
< script src = http://code.jquery.com/jquery-1.10.2.min .js > < /脚本 >
< 脚本 src = http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js > < / script >
< script src = https：// ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js\"> < / script >
< script src = http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js > < / script >
< style >
th
{
border-bottom：1px solid＃d6d6d6;
}
tr：nth-child（偶数）
{
背景：＃e9e9e9;
}
< / style >
< / head >
< body >
< div data-role = 标题 >
< h1 > 页面标题< / h1 >
< / div >
< < span class =code-leadattribute> script id = itemTemplate type = text / x-jquery-tmpl >
< tr >
// alert（hi）;
< td > $ {FileName} < / td >
< td > $ {Parid} < / td >
< td > $ {Rank} < / td >
< td > $ {Year} < / td >
< td > $ {CapturedBy} < / td >
< td > $ {CapturedDate} < / td >
< td > $ {Image} < / td >
< / tr >
< / script >
< table id = itemList border = 1 style = cursor：pointer; data-role = table class = ui-responsive 数据模式 = columntoggle < span class =code-attribute> data-column-btn-text = 点击我隐藏或显示列！ >
< thead >
< tr >
< td > FileName < / td >
< td > Parid < / td >
< td > Rank < / td >
< td > 年< / td >
< td > CapturedBy < / td >
< td > CapturedDate < / td >
< td > 图片< / td >
< / tr >
< span class =code-keyword>< / thead >
< tbody >
< / tbody >
< / table >
< script type = text / javascript >
$（document）.ready（function（）{
alert（dps1）;
var items = [
{FileName：Apple，Parid：80，Rank：3，年份：240，CapturedBy：80，CapturedDate：3，Image ：240}，
{FileName：Apple，Parid：80，Rank：3，年份：240，CapturedBy：80，CapturedDate：3，图片： 240}，
{FileName：Apple，Parid：80，Rank：3，年份：240，CapturedBy：80，CapturedDate：3，图片：240 }，
{FileName：Apple，Parid：80，Rank：3，年份：240，CapturedBy：80，CapturedDate：3，图片：240}，
{FileName：Apple，Parid：80，Rank：3，年份：240，CapturedBy：80，CapturedDate：3，图片：240}，
{FileName：Apple，Parid：80，排名：3，年份：240，CapturedBy：80，CapturedDate：3，图片：240}，
{FileName：Banana，Parid：80，Rank：3，年份：240，CapturedBy：80，CapturedDate： 3，图片：240}
];
$（#itemTemplate）。tmpl（items）.appendTo（#itemList tbody）;
}）;
var tbl = document.getElementById（itemList）;
if（tbl！= null）
{
// alert（dps）;
for（var i = 0; i < tbl.rows.length; i ++）
{
for < span class =code-attribute> （var j = 0; j < < span class =code-attribute> tbl.rows [i] .cells.length; j ++）
{
// alert（tbl.rows.length）;
tbl.rows [i] .cells [j] .onclick = function （） { < span class =code-attribute> getval（this）; };
alert（tbl.rows.length）;
< span class =code-attribute> }
}
}
< span class =code-attribute>
function getval（cel） {
alert（cel.innerHTML）;
< span class =code-attribute> }
< / script >
< div data-role = 页脚 >
< h1 > 页脚文字< ; / h1 >
< / div >
< / div >
< span class =code-keyword>< / body >
< / html >
解决方案
{FileName} < / td >
< td >
{Parid} < / td >
< < span class =code-leadattribute> td >
{Rank} < / td >
< td >
Hi all,
Im trying to display individual cell pop up in html table.Only first row cells are showing pop up...Here is my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<style>
th
{
border-bottom: 1px solid #d6d6d6;
}
tr:nth-child(even)
{
background:#e9e9e9;
}
</style>
</head>
<body>
<div data-role="header">
<h1>Page Title</h1>
</div>
<script id="itemTemplate" type="text/x-jquery-tmpl">
<tr>
// alert("hi");
<td>${FileName}</td>
<td>${Parid}</td>
<td>${Rank}</td>
<td>${Year}</td>
<td>${CapturedBy}</td>
<td>${CapturedDate}</td>
<td>${Image}</td>
</tr>
</script>
<table id="itemList" border="1" style="cursor: pointer;" data-role="table" class="ui-responsive" data-mode="columntoggle" data-column-btn-text="Click me to hide or shown columns!" >
<thead>
<tr>
<td>FileName</td>
<td>Parid</td>
<td>Rank</td>
<td>Year</td>
<td>CapturedBy</td>
<td>CapturedDate</td>
<td>Image</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
alert("dps1");
var items = [
{ FileName: "Apple", Parid: "80", Rank : "3", Year : "240", CapturedBy: "80", CapturedDate : "3", Image : "240" },
{ FileName: "Apple", Parid: "80", Rank : "3", Year : "240", CapturedBy: "80", CapturedDate : "3", Image : "240" },
{ FileName: "Apple", Parid: "80", Rank : "3", Year : "240", CapturedBy: "80", CapturedDate : "3", Image : "240" },
{ FileName: "Apple", Parid: "80", Rank : "3", Year : "240", CapturedBy: "80", CapturedDate : "3", Image : "240" },
{ FileName: "Apple", Parid: "80", Rank : "3", Year : "240", CapturedBy: "80", CapturedDate : "3", Image : "240" },
{ FileName: "Apple", Parid: "80", Rank : "3", Year : "240", CapturedBy: "80", CapturedDate : "3", Image : "240" },
{ FileName: "Banana", Parid: "80", Rank : "3", Year : "240", CapturedBy: "80", CapturedDate : "3", Image : "240" }
];
$( "#itemTemplate" ).tmpl( items ).appendTo( "#itemList tbody" );
});
var tbl = document.getElementById("itemList");
if (tbl != null)
{
// alert("dps");
for (var i = 0; i < tbl.rows.length; i++)
{
for (var j = 0; j < tbl.rows[i].cells.length; j++)
{
// alert(tbl.rows.length);
tbl.rows[i].cells[j].onclick = function () { getval(this); };
alert(tbl.rows.length);
}
}
}
function getval(cel) {
alert(cel.innerHTML);
}
</script>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html> 解决方案
{FileName}</td> <td>
{Parid}</td> <td>
{Rank}</td> <td>
这篇关于如何在html表格中点击单元格显示单个弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
