How to make a scrollable table?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • abctech
    New Member
    • Dec 2006
    • 157
    #1

    How to make a scrollable table?

    Helo Friends,

    I am a novice Java programmer, I'm working with Jsp + Javascript to develop a web application.I only have basic Html knowledge and I mostly use "FrontPage" to develop my web pages but currently my webpage requires some dHtml and CSS fundamentals hence I'm posting a query in this forum expecting some guidance,

    I have a floating table in my webpage which I achieved using JS. I have written Jsp code to get database records one by one and append it to this table(i.e basically the table is being created on the fly), its all good till here but now I need to make this table scrollable and thats where I'm stuck! I have attached a snapshot of my webpage here and my code(Jsp) is as below:-

    Code:
    <%
out.write("<html>\r\n");
out.write("<head>\r\n");
out.write("<style type=text/css>table.T1 {overflow: scroll}</style>");
out.write("<layer id = divStayTopLeft>");
out.write("<div align = right>");
out.write("<table class = T1 align = right border = 1 width=450 cellspacing = 0 cellpadding = 0 >");
out.write("<tr><td bgcolor=#FFFFCC><b>Candidate Name</b></td>");
out.write("<td bgcolor=#FFFFCC><b>Batch-ID</b></td>");
out.write("<td bgcolor=#FFFFCC><b>Reg Amt</b></td>");	
out.write("<td bgcolor=#FFFFCC><b>Total Fees </b></td>");
out.write("<td bgcolor=#FFFFCC><b>Balance</b></td></tr>");	
			
// Here I have the code for getting the backend-table's record and appending it to the Html table as a new row.

out.write("</table>");
out.write("</div>");
out.write("</layer>");
out.write("</head>");
out.write("</html>");		
%>
    The above code is supposed to make my table scrollable, but it doesn't work, can someone check it for me please and advice me how to go about it? Or if any other approach of carrying this out please suggest!
    Tags: makescrollabletable
    • abctech
      New Member
      • Dec 2006
      • 157
      #2
      Here is the snapshot

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434
          #3
          I have a few minutes right now and I'll work on this. Your code is very, very, very out of date. For example, there is no such thing as a <layer> tag and hasn't been used since 1998, I think.

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              This is as far as I can go right now. Hope it can get you started.
              Code:
              <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title></title>
<style type=text/css>
	#divStayTopLeft{
		height:100px;
		overflow:scroll
		}
	table.T1 {
		text-align:center;
		font-weight:bold;
		float:right;
		width:450px;
		}

	.highlighted {
		background-color:#ffffcc;
		border:1px solid black;
		}
	
</style>
</head>
<body>

<div id = "divStayTopLeft">
<div>
<table class = T1 cellspacing = 0 cellpadding = 0 >
<tr><td class="highlighted">Candidate Name</td>
<td class="highlighted">Batch-ID</td>
<td class="highlighted">Reg Amt</td>
<td class="highlighted">Total Fees</td>
<td class="highlighted">Balance</td></tr>
<tr><td>hello</td></tr>
<tr><td>hello</td></tr>
<tr><td>hello</td></tr>
</table>
</div>
</div>

</body>
</html>

                Comment

                • abctech
                  New Member
                  • Dec 2006
                  • 157
                  #5
                  Originally posted by drhowarddrfine
                  I have a few minutes right now and I'll work on this. Your code is very, very, very out of date. For example, there is no such thing as a <layer> tag and hasn't been used since 1998, I think.
                  Helo and thanks a lot for your time and inputs,much appreciated!

                  To be honest I just have basic Html knowledge and I have never worked with the <div> and <layer> tags before!

                  this is the script that I've incorporated into my webpage to give my Html-table a floating-effect, and its working fine too but the problem is that now I need the table to be scrollable as well.I tried to apply the CSS -overflow property to this table as one can see in my scriptlet-code..but it doesnt work..not sure if thats even the right way to use 'overflow' !

                  Presently I'm looking into the code that you have provided here but I still dont know how to place it into my Jsp scriptlet..stil l working on it!

                    Comment

                    • abctech
                      New Member
                      • Dec 2006
                      • 157
                      #6
                      I made the changes in my page.
                      Now my table is scrollable but unlike earlier it doesnt float,it just appears at the bottom of the page!

                      This is how my entire webpage(JSP) looks like now:-

                      Code:
                      <%@ page language = "JAVA" import = "java.sql.*"  %>
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
<style type=text/css>
	#divStayTopRight{
		height:100px;
		overflow:scroll
		}
	table.T1 {
		text-align:center;
		font-weight:bold;
		float:right;
		width:450px;
		}

	.highlighted {
		background-color:#ffffcc;
		border:1px solid black;
		}	
</style>
<script language = “javascript”>
// some clientside validation code
</script>
</head>
<body>
<form name = “Students”>
<table>
<!—This is the main layout table and I have fixed my entire webpage in to this table -->
</table>
</form>
<%
	PreparedStatement pst ; 
	ResultSet rs = null ;
 try
 {
   pst = con.prepareStatement(“select * from Students”);	
   rs = pst.executeQuery();

  if (rs != null)
  {			
      out.write("<div id = divStayTopRight>");
      out.write("<div>");
      out.write("<table class = T1 border = 1 cellspacing=0 cellpadding=2>");
      out.write("<tr>");
      out.write("<th  bgcolor=lightgrey>Candidate Name</th>");
      out.write("<th  bgcolor=lightgrey>Batch-ID</th>");
      out.write("<th  bgcolor=lightgrey>Reg Amt</th>");
      out.write("<th  bgcolor=lightgrey>Total Fees </th>");
      out.write("<th  bgcolor=lightgrey>Balance</th>");
      out.write("</tr>");	
		
      // Here I have the code for getting the backend record and appending it to the Html table
      while(rs.next())
       {				
               out.write("<tr><td >” + rs.getString(1) + "</b></a></td>");
               out.write("<td>" + rs.getString(2) + "</td>");
               out.write("<td>" + rs.getLong(3) + "</td>");
               out.write("<td>" + rs.getLong(4) + "</td>");
               out.write("<td>" + rs.getLong(5)+ "</td></tr>");	
       }		
       out.write("</table>");	
       out.write("</div>");
       out.write("</div>");				
  }
  rs.close();	
  pst.close();
 }
 catch(Exception e)
 {
     e.printStackTrace();
 }	
%>	
</body>
</html>
                      and this is the script I came across to make a table float on the webpage:-

                      Code:
                      <script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">

<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="1" width="130" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" bgcolor="#FFFFCC">
      <p align="center"><b><font size="4">Menu</font></b></td>
  </tr>
  <tr>
    <td width="100%" bgcolor="#FFFFFF">
      <p align="left"> <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
       <a href="http://www.dynamicdrive.com/new.htm">What's New</a><br>
       <a href="http://www.dynamicdrive.com/hot.htm">What's Hot</a><br>
       <a href="http://www.dynamicdrive.com/faqs.htm">FAQs</a><br>
       <a href="http://www.dynamicdrive.com/morezone/">More Zone</a></td>
  </tr>
</table>
<!--END OF EDIT-->

</layer>


<script type="text/javascript">

/*
Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
	var startX = 3,
	startY = 150;
	var ns = (navigator.appName.indexOf("Netscape") != -1);
	var d = document;
	function ml(id)
	{
		var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
		if(d.layers)el.style=el;
		el.sP=function(x,y){this.style.left=x;this.style.top=y;};
		el.x = startX;
		if (verticalpos=="fromtop")
		el.y = startY;
		else{
		el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		el.y -= startY;
		}
		return el;
	}
	window.stayTopLeft=function()
	{
		if (verticalpos=="fromtop"){
		var pY = ns ? pageYOffset : document.body.scrollTop;
		ftlObj.y += (pY + startY - ftlObj.y)/8;
		}
		else{
		var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		ftlObj.y += (pY - startY - ftlObj.y)/8;
		}
		ftlObj.sP(ftlObj.x, ftlObj.y);
		setTimeout("stayTopLeft()", 10);
	}
	ftlObj = ml("divStayTopLeft");
	stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
                      Now I need to add the above code in my scriptlet to give my table a floating effect! Not sure how to achieve that..Still working on it !
                      Attached Files
                      Last edited by abctech; Jan 28 '07, 05:19 PM. Reason: adding image

                        Comment

                        • abctech
                          New Member
                          • Dec 2006
                          • 157
                          #7
                          The issue is resolved now using <iframe> and <div>, the iframe is scrollable as well as floating!
                          here is the view

                          Thanks to this forum for all the help!

                            Comment

                            Previous template Next
                            Working...