Sometimes we may need to code to make an entire row clickable, I mean, the user should click any cell on a tr and a required functionality should be performed as the result of this click. When you cannot use server side coding and rely entirely on client side coding, the below could be one of the approaches to this problem.
<asp:Panel ID=”_pnlContactList” runat=”server” CssClass=”tableBorder” Height=”200px” ScrollBars=”Vertical”>
<table cellspacing=”0″ style=”width: 970px; margin-top:5px; margin-left:10px; margin-bottom:5px; margin-right:5px” class=”tableBorder FontNameValue”>
<tr>
<td align=”center” class=”FontName tableBorder tdheader”> Name</td>
<td align=”center” class=”tableBorder tdheader FontName”>Title</td>
<td align=”center” class=”FontName tableBorder tdheader”>Phone Number</td>
<td align=”center” class=”tableBorder tdheader FontName”>Email</td>
</tr>
<tr align=”left” onclick=”Show(1)”>
<td align=”left” class=”tableBorder”>Bill</td>
<td align=”left” class=”tableBorder”>Gates</td>
<td class=”tableBorder”>800-000-0000</td>
<td class=”tableBorder”>bill.gates@microsoft.com</td>
</tr>
<tr onclick=”Show(2)”>
<td align=”left” class=”tableBorder”>Bill</td>
<td align=”left” class=”tableBorder”>O’Reilly</td>
<td class=”tableBorder”>800-000-0000</td>
<td class=”tableBorder”>bill.reilly@foxnews.com</td>
</tr></table></asp:Panel>
Javascript functions inside <head>
<script type=”text/javascript”>
var nameArray = [];
nameArray[1] = “Bill Gates”;
nameArray[2] = “Bill O’Reilly”;
nameArray[3] = “Bill Clinton”;
nameArray[4] = “Donald Trump”;
nameArray[5] = “Donald Duck”;
nameArray[6] = “Donald Rumsfeld”;
nameArray[7] = “Home Foreclosure”;
nameArray[8] = “Credit Card”;
var emailArray = [];
emailArray[1] = “bill.gates@microsoft.com“;
emailArray[2] = “bill.reilly@foxnews.com“;
emailArray[3] = “bill.clinton@capitol.com“;
emailArray[4] = “donald.trump@empire.com“;
emailArray[5] = “donald.duck@disney.com“;
emailArray[6] = “donald.rumsfeld@state.com“;
emailArray[7] = “home.foreclosure@states.com“;
emailArray[8] = “credit.card@debt.com“;
function Hide()
{
document.getElementById(‘_divPnl’).style.visibility = ‘hidden’;
}
function Show()
{
document.getElementById(‘_divPnl’).style.visibility = ‘visible’;
}
function Show(elem)
{
for(var i=1; i<=8; i++)
{
if(elem == i)
{
document.getElementById(‘name’).innerHTML = nameArray[i];
document.getElementById(‘email’).innerHTML = emailArray[i];
document.getElementById(‘_divPnl’).style.visibility = ‘visible’;
}
}
}
</script>
coming back to markup:
in my case, i want to show a panel when a tr is clicked, this panel will contain detailed information relevant to the <tr>. this panel would be initially hidden, and when the <tr> is clicked, will be displayed.
<div id=”_divPnl” style=”visibility:hidden”>
<asp:Panel ID=”_pnlContactDetails” runat=”server” CssClass=”tableBorder” Height=”170px”>
<table cellspacing=”0″ style=”width: 970px; margin-top:5px; margin-left:10px” class=”tableBorder”>
<tr>
<td align=”center” class=”FontName tableBorder tdheader”>
Address</td>
<td class=”tableBorder tdheader” style=”color:Silver”>none</td>
<td align=”center” class=”FontName tableBorder tdheader” style=”color:Silver”>none
</td>
<td class=”tableBorder tdheader” style=”color:Silver”>none</td>
</tr>
<tr>
<td align=”left” class=”tableBorder FontName”>Name</td>
<td id=”name” align=”left” class=”tableBorder FontNameValue”></td> //empty <td>, value will be dynamically displayed using <script> functions
<td class=”tableBorder FontName”>Title</td>
<td class=”tableBorder FontNameValue”>Mr. </td>
</tr>
<tr>
<td align=”left” class=”tableBorder FontName”>
Address Line 1</td>
<td align=”left” class=”tableBorder FontNameValue”>I-275 W
</td>
<td class=”tableBorder FontName”>Telephone Number</td>
<td class=”tableBorder FontNameValue”>888-890-9021</td>
</tr>
<tr>
<td class=”tableBorder FontName”>Address Line 2</td>
<td class=”tableBorder FontNameValue”>Apt O</td>
<td class=”tableBorder FontName”>Cell Phone Number</td>
<td class=”tableBorder FontNameValue”>888-888-8888</td>
</tr>
<tr>
<td class=”tableBorder FontName”>City</td>
<td class=”tableBorder FontNameValue”>Cincinnati</td>
<td class=”tableBorder FontName”>Fax Number</td>
<td class=”tableBorder FontNameValue”>800-000-0000</td>
</tr>
<tr>
<td class=”tableBorder FontName”>State</td>
<td class=”tableBorder FontNameValue”>OH</td>
<td class=”tableBorder FontName”>Email Address</td>
<td class=”tableBorder FontNameValue”><a href=”someone@somewhere.com” id=”email”></a></td>
</tr>
<tr>
<td class=”tableBorder FontName”>Zip Code</td>
<td class=”tableBorder FontNameValue”>00000</td>
<td class=”tableBorder FontName”>Contact Type</td>
<td class=”tableBorder FontNameValue”>Customer</td>
</tr>
</table>
</asp:Panel>
</div>
References:
1. http://imar.spaanjaars.com/QuickDocId.aspx?quickdoc=312
2. http://www.devx.com/tips/Tip/13638
3. http://www.tizag.com/javascriptT/javascript-getelementbyid.php
