• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 103
  • Last Modified:

Hide row when retrieving data from database

The page below is supposed to show the Message recordset when the visible table row is clicked.
It's working fine when I remove the table header, so I commented it out. Is there a way to modify the javascript so that I can also sort the data by clicking the table header?
Thank you for your help
<!-- #include virtual="/Connections/Authentication.asp" -->
<%
if request.querystring("sort")<>"" then
   sort=request.querystring("sort")
else
   sort="ID desc"
end if

set rs = Server.CreateObject("ADODB.Recordset")
rs.CursorLocation = 3  ' adUseClient

rs.Open "SELECT * FROM HR_Letters ORDER BY " & sort & " " & request.querystring("order"), conn

rs.PageSize = 10
intPageCount = rs.PageCount

Select Case Request("Action")
	case "<<"
		intpage = 1
	case "<"
		intpage = Request("intpage")-1
		if intpage < 1 then intpage = 1
	case ">"
		intpage = Request("intpage")+1
		if intpage > intPageCount then intpage = IntPageCount
	Case ">>"
		intpage = intPageCount
	case else
		intpage = 1
end select
%>
<html>
<head>
<title></title>
<link rel="stylesheet" href="/Scripts/Styles.css" type="text/css" />
<script type="text/javascript" src="/jquery/jquery-1.8.2.min.js"></script>

<script type="text/javascript">
$(function() {
  $('tr:odd acronym').hide();
  $('tr:even').click(function() {
    if (!$(this).next().find('acronym').is(':visible')) {
      $('tr:odd acronym').hide();
    }
    $(this).next().find('acronym').slideToggle();
  });
});

</script>
</head>
<body>

<table align="center" class="border">
<!--
<tr>
<td >
<%if request.querystring("order") = "DESC" then%>
<a href="Disability1.asp?sort=First_Name&order=ASC">First Name</a>
<%else%>
<a href="Disability1.asp?sort=First_Name&order=DESC">First Name</a>
<%end if%>
</td>
<td >
<%if request.querystring("order") = "DESC" then%>
<a href="Disability1.asp?sort=Last_Name&order=ASC">Last Name</a>
<%else%>
<a href="Disability1.asp?sort=Last_Name&order=DESC">Last Name</a>
<%end if%>
</td>
<td align="center" class="hand">
<%if request.querystring("order") = "DESC" then%>
<a href="Disability1.asp?sort=Emp_Id&order=ASC">Emp#</a>
<%else%>
<a href="Disability1.asp?sort=Emp_Id&order=DESC">Emp#</a>
<%end if%>
</td>
</tr>
//-->
<%
rs.AbsolutePage = intPage
For intRecord = 1 To rs.PageSize
%>


<tr><td class="border"><%=rs("First_Name")%></td><td class="border"><%=rs("Last_Name")%></td><td class="border"><%=rs("Emp_Id")%></td></tr>

<tr><td class="border" colspan="3"><acronym><%=rs("Message")%></acronym></td></tr>

<%
rs.MoveNext
If rs.EOF Then Exit For
Next
rs.Close
set rs = Nothing
Conn.Close
set Conn = Nothing
%>
</table>
 

 </body>
 </html>




    

Open in new window

0
romsom
Asked:
romsom
  • 3
  • 3
1 Solution
 
Julian HansenCommented:
There are several ways to solve this
1. Put your header in side a <thead> and the active cells inside a <tbody>
<table border ="1">
  <thead>
    <tr>
      <th>Name</th><th>Age</th><th>Info</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td>
    </tr>
    <tr>
      <td colspan="3"><p>First Person Details</p></td>
    </tr>
    <tr>
      <td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td>
    </tr>
    <tr>
      <td colspan="3"><p>Second Person Details</p></td>
    </tr>
    <tr>
      <td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td>
    </tr>
    <tr>
      <td colspan="3"><p>Third Person Details</p></td>
    </tr>    
  </tbody>
</table>

Open in new window

jQuery now can be made relative to the <tbody> tag
$(function() {
  $('tbody tr:odd p').hide();
  $('tbody tr:even').click(function() {
    if (!$(this).next().find('p').is(':visible')) {
      $('tbody tr:odd p').hide();
    }
    $(this).next().find('p').slideToggle();
  });
});

Open in new window

Option 2
Simply give the clickable rows a class
HTML
<table border ="1">
  <thead>
    <tr>
      <th>Name</th><th>Age</th><th>Info</th>
    </tr>
  </thead>
  <tbody>
    <tr class="headerow">
      <td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td>
    </tr>
    <tr class="datarow">
      <td colspan="3"><p>First Person Details</p></td>
    </tr>
    <tr class="headerow">
      <td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td>
    </tr>
    <tr class="datarow">
      <td colspan="3"><p>Second Person Details</p></td>
    </tr>
    <tr class="headerow">
      <td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td>
    </tr>
    <tr class="datarow">
      <td colspan="3"><p>Third Person Details</p></td>
    </tr>    
  </tbody>
</table>

Open in new window

jQuery
$(function() {
  $('.datarow p').hide();
  $('.headerow').click(function() {
    if (!$(this).next().find('p').is(':visible')) {
      $('.datarow p').hide();
    }
    $(this).next().find('p').slideToggle();
  });
});

Open in new window

0
 
romsomAuthor Commented:
I did some research and I found another way it can be done. This way I'm able to display the table header and sort the data:
<html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function($) {
			$('#accordion').find('.accordion-toggle').click(function(){
	
				//Expand or collapse this panel
				$(this).next().slideToggle('fast');
	
				//Hide the other panels
				$(".accordion-content").not($(this).next()).slideUp('fast');
	
			});
		});
	</script>
	<style>
		.accordion-toggle {cursor: pointer; margin: 0;}
		.accordion-content {display: none;}
	</style>
</head>
<body>
<div id="accordion">
<table border="1">
<tr class="accordion-toggle"><td>Accordion 1</td></tr>
<tr class="accordion-content"><td>Cras malesuada ultrices augue molestie risus.</td></tr>
<tr class="accordion-toggle"><td>Accordion 1</td></tr>
<tr class="accordion-content"><td>Cras malesuada ultrices augue molestie risus.</td></tr>
<tr class="accordion-toggle"><td>Accordion 1</td></tr>
<tr class="accordion-content"><td>Cras malesuada ultrices augue molestie risus.</td></tr>


</div>

</body>
</html>

Open in new window

0
 
romsomAuthor Commented:
Thank you very much!
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Julian HansenCommented:
The code you posted is essentially the same as the second method I posted above - you use classes to target the row. However, by removing the <p> from the equation you loose the slide effect because <tr> elements don't respond to toggle. So it will work in that they rows will show and hide but you won't get the slide effect.
0
 
romsomAuthor Commented:
Thank you Julian!
I'm using the your second option, it looks nice.
0
 
Julian HansenCommented:
You are most welcome.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now