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>
Submit an article or tip