...

View Full Version : Displaying clicked row in an larger area



naka1888
12-18-2008, 05:22 PM
Hi,

I have a table of items and when one of the rows is clicked the information in the row is to be displayed in a larger area on the screen with a back and forward to display the other items in the larger area aswell.

Any ideas would be great as i'm stumped.

Cheers,
Naka

itsallkizza
12-18-2008, 05:56 PM
I coded up the concept for you, you can modify it to suit your needs:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example</title>
<style type="text/css">
#my_table td
{
background-color: #cccccc;
}

#my_table tr
{
cursor: pointer;
}

td.hidden_info
{
display: none;
}
</style>
<script type="text/javascript">
// <![CDATA[

function checkClass(element,class_name)
{
var getClass = function(element)
{
return (element.className || (element.getAttribute ? element.getAttribute("class") : false) || (element.attributes["class"] ? element.attributes["class"].value : false) || "");
}
var elm_class = getClass(element);
var classes_to_check = elm_class.split(" ");
for (var i=0;i<classes_to_check.length;i++)
{
if (class_name == classes_to_check[i]) return true;
}
return false;
}

function getSetFromSetWithClass(element_set,class_name)
{
var new_set = new Array();
for (var i=0;i<element_set.length;i++)
{
if (checkClass(element_set[i],class_name)) new_set.push(element_set[i]);
}
return new_set;
}

function displayInfo(info)
{
document.getElementById("display").innerHTML = info;
}

window.onload = function()
{
var rows = document.getElementById("my_table").getElementsByTagName("tr");
for (var i=0;i<rows.length;i++)
{
rows[i].onclick = function()
{
var info = getSetFromSetWithClass(this.getElementsByTagName("td"),"hidden_info")[0];
displayInfo(info.innerHTML);
}
}
}

// ]]>
</script>
</head>
<body>

<table id="my_table">
<tr>
<td class="hidden_info">This row has all kinds of information that can be displayed.</td>
<td>Blah blah</td>
<td>filler text, lots of filler text!</td>
</tr>
<tr>
<td class="hidden_info">So does this row. Here's some of that dulce info:<br />2 + 2 = 4, NOT 37</td>
<td>Blah blah</td>
<td>filler text, lots of filler text!</td>
</tr>
</table>

<div id="display"></div>

</body>
</html>

rangana
12-19-2008, 04:55 AM
Apologies for poking in, but it doesn't seemed to work on FF, Safari and Opera.

I have to change highlighted:


var getClass = function(element)
{
return (element.className || (element.getAttribute ? element.getAttribute("class") : false) || element.attributes["class"].value || "");
}



...into:


return element.className;

itsallkizza
12-19-2008, 05:25 AM
I'm sorry, I mistyped that (should have copied and pasted) when I coded his page.

This is what I meant, works cross-browser:


return (element.className || (element.getAttribute ? element.getAttribute("class") : false) || (element.attributes["class"] ? element.attributes["class"].value : false) || "");



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum