HOW TO: Use ASP to Generate DHTML-Enabled Tables in Front Page 2000

View products that this article applies to.

Summary

Microsoft Active Server Pages (ASP) can be used to gather information from a database, and Dynamic HTML (DHTML) can be used to change information that is displayed on a Web page from the client. This article explains how to use these two technologies together. Microsoft provides programming examples for illustration only, without warranty either expressed or implied. This includes, but is not limited to, the implied warranties of merchantability or fitness for a particular purpose. This article assumes that you are familiar with the programming language that is being demonstrated and with the tools that are used to create and to debug procedures. Microsoft support engineers can help explain the functionality of a particular procedure, but they will not modify these examples to provide added functionality or construct procedures to meet your specific requirements.

Defining DHTML ID Attributes

HTML tags on a Web page that have been given an ID attribute can be easily accessed through DHTML. When you work with static text, the ID can be inserted into an HTML tag manually, as in the following example:

<P ID="MyParagraph">This is some sample text</P>

When you work with a Web page that is dynamically generated by ASP from a live database, however, the ID attributes should be generated dynamically as well. The ASP example in this article illustrates how to accomplish this.

ASP Sample Explained

The ASP page sample is divided into three sections that are labeled with HTML comments. These sections are:

Section One: Stylesheet Classes - The stylesheet classes listed are used by the DHTML function to change the appearance of text that has been changed.
Section Two: DHTML JavaScript - This function detects whether a table cell was clicked, and, if so, it prompts for text to insert into the table cell that was clicked.
Section Three: HTML Table & ASP Code - This section of code first creates an HTML table that calls the DHTML function when it is clicked, and then uses ASP code to open the sample database's "Customers" table to loop through all the records and display them in the HTML table as individual rows and columns. Each column is given a unique ID by the ASP code that can be used with the DHTML function.

NOTE: This example demonstrates how to use ASP to create a table with dynamically created IDs for DHTML. Changing the values in the table cells does not update the actual database.

Creating the ASP Sample

Follow these steps to create the ASP sample page:

Open your root web in FrontPage 2000 on a Microsoft Internet Information Services Web server.
Open a new page in FrontPage.
If the sample database is not already in the "/fpdb/fpnwind.mdb" folder, insert the Northwind sample database into your web by following these steps:
1. On the File menu, click Insert, click Database, and then click Results.
2. Click to select Use a sample database connection (Northwind), and then click Next.
3. When the next page of the wizard appears, click Cancel.
Switch to HTML view.

Remove all the existing HTML code, and insert the following ASP/HTML code:

<% @ Language="VBScript" %>
<% Option Explicit %>
<html>
<head>
<title>ASP/DHTML Test</title>

<!-- ********** SECTION ONE ********** -->
<!-- add two stylesheet classes -->
<style>
.normal { color: black; background-color:white }
.edited { color: white; background-color:blue }
</style>

<!-- ********** SECTION TWO ********** -->
<!-- add the JavaScript function -->
<script language="JavaScript">
<!--
   /* define function to change cell value & style */ 
   function changeCell()
   {
      /* determine if a table cell was clicked */ 
      if(window.event.srcElement.tagName == "TD")
      {
         /* create a prompt message */ 
         var varMsg = 'Please enter a new value for ';
         varMsg += window.event.srcElement.id;

         /* prompt for new information */ 
         varMsg = prompt(varMsg,'Some Value')

         /* update the table cell for new information */ 
         window.event.srcElement.innerText = varMsg;

         /* change the table cell class to show as edited */ 
         window.event.srcElement.className = 'edited';
      }
   }
-->
</script>
</head>

<body>
<!-- *********** SECTION THREE ********** -->
<!-- creating a table from the database -->
<table border="1" onClick="changeCell()">
<%
   ' declare all variables
   Dim objCN,objRS,objField
   Dim strSQL,strCN
   Dim lngRow,lngCol

   ' define the SQL string
   strSQL = "SELECT * FROM Customers"   

   ' define the database connection string
   strCN = "driver={Microsoft Access Driver (*.mdb)};" & _
      "dbq=" & Server.MapPath("/fpdb/fpnwind.mdb")

   ' open the database connection
   Set objCN = Server.CreateObject("ADODB.Connection")
   objCN.Open strCN   

   ' open the recordset
   Set objRS = objCN.Execute(strSQL)

   ' set starting row counter
   lngRow = 0

   ' loop through the data records
   While Not objRS.EOF

      ' reset column counter
      lngCol = 0

      ' increment row counter
      lngRow = lngRow + 1

      ' output start of table row
      Response.Write "<tr>" & vbCrLf

      ' loop through the fields in each record
      For Each objField in objRS.Fields

         ' increment column counter
         lngCol = lngCol + 1

         ' output a cell and give it an ID for DHTML
         Response.Write "<td class=""normal"" id=""ROW" & _
            lngRow & "COL" & lngCol & """>" & _
            objField & "</td>" & vbCrLf

      Next

      ' move to next record in database
      objRS.MoveNext

      ' output end of table row
      Response.Write "</tr>" & vbCrLf

   Wend
%>
</table>

</body>
</html>

Save the page as ASP_DHTML_Test.asp.

When you browse this page in Microsoft Internet Explorer and click a table cell, you are prompted to enter a value to be inserted into the table cell that was clicked. In addition, the stylesheet class of the affected table cell is changed to reflect that it has been edited.

↑ Back to the top