Manipulate Data in Internet Explorer with the Tabular Data Control

Manipulate Data in Internet Explorer with the Tabular Data Control

n my last article, I explained how to use the XML Data Source Object to extract content from an external XML file or XML data embedded in the HTML file into a HTML page.

In this article, I will be using a similar process to demonstrate how to use the Tabular Data Control. This is an ActiveX control that’s built into Internet Explorer (versions 4 and upwards), which allows you to extract ordered (delimited) contents from an ASCII file into HTML elements.

Suppose you have a text file that contains three fields (which can be compared to tables in a database). If the fields are delimited by a specific character, (such as a comma or tab character), you can identify the values and extract them for use elsewhere, such as in an HTML page.

This functionality is especially useful if you have relatively small amounts of data that need to be updated frequently and require client-side scripting. Basically, it acts like a small database.

The only disadvantage of this control is that it works with MSIE only.

In this article, I’ll take you through four examples, each of increasing difficulty, that will show how to use the Tabular Data Control.

Getting Started
Initialize the tabular data control in a Web page using the tag and the control’s CLASSID (unique identifier), like this:


Any object has a number of parameters. An object’s parameters are specified using the tag. The tabular data control has around 7 parameters. Here are the more important ones:

  • DataURL: Shows the path of the file that contains the data. For example, “data.txt”.
  • UseHeader: Normally, this parameter is always set to true, which means you should use the field name for referencing a particular field. In some applications, the field name (header) may not be required. In that case, the default value is false.
  • TextQualifier: This is that character at the beginning and end of a text that qualifies that text. For example, “~My name is Premshree~.” Here the TextQualifier is “~”.
  • FieldDelim: The Field Delimiter distinguished between the different data fields of the data file. Consider a data file with the fields name, age, and sex. The values for these fields will be written as “*SomeName*|*SomeAge*|*SomeSex*.” Here, “|” is the field delimiter and “*” is the text qualifier.

Complete initialization will look like this:

The parameter names are not case sensitive.

The TextQualifier and FieldDelim parameters can be any character. Choose a character that you are less likely to use in your text.

In the following examples, I’m using the text qualifier “~”, the field delimiter “|”, and the text extension the “.txt.” You can use any text extension you want.

Extract and Display Data
The first example is fairly simple. My name and age are stored in the text file “data1.txt.” Listing 1 shows how to display my name and age using the tag.

The output will display:

Premshree 19 

In Listing 1, note the attributes within the SPAN tags. DATASRC specifies the data source to use?the same as the ID of the object initialized, in this case, “data1.” The DATAFLD attribute specifies which field is to be displayed. Since the “data1.txt” file has two fields (“name” and “age”), specifying the DATAFLD as “name” will display the name.

You can use this same method to extract data from a text file into any HTML element. However, there is a flaw. If your data file contains more than one entry, you wont be able to extract all the values directly.

In these cases, use the TABLE tag.

The next example will illustrate how you can use the TABLE tag to solve this problem.

Display in a Tabular Form
Listing 2 demonstrates how to extract this data and display it on the Web page in a tabular form. The text file in this example stores the name, age, and sex of three people:

 name|age|sex~Premshree Pillai~|~19~|~male~~Vinod~|~18~|~male~~Usha~|~19~|~female~

The code in Listing 2 contains three data fields (DATAFLD) in three different tags (columns) only once. The Web page automatically displays all three sets of values (three rows). You can add as much content as you want to the text file without making any modifications to the HTML code that extracts these values.

The output looks like this:

Name : Age : Sex :
Premshree Pillai 19 male
Vinod 18 male
Usha 19 female

Add a Little JavaScript
In the first example, the element displayed the first entry of the data file. When you add another entry to the file, the data file (data1.txt) looks like this:

name|age~Premshree Pillai~|~19~~Vinod~|~18~

You can use JavaScript to see the second entry (i.e. Vinod 18). The following code shows how:


The output will be:

Vinod 18 

Initially, the entire data is stored in a variable dataset using the recordset method. The moveNext() method points to the next data item (next row). Other methods that can be used are:

  • moveFirst(): Points to the first data item (first row).
  • moveLast(): Points to the last data item (last row).
  • EOF: Checks to see if you have reached the end of the file.

It might be beneficial to see this control in a more dynamic example. Listing 3 is of a JavaScript Ticker that ticks a number of messages. Each message points to a particular URL. The ticker reads its messages and the corresponding URL from a text file (tickerData.txt).

Though this functionality is only availble in MSIE, it is extemely versatile?especially when you’ve got small amounts of character-delimited data that you want to extract and display using client-side scripting.

Share the Post:
XDR solutions

The Benefits of Using XDR Solutions

Cybercriminals constantly adapt their strategies, developing newer, more powerful, and intelligent ways to attack your network. Since security professionals must innovate as well, more conventional endpoint detection solutions have evolved

AI is revolutionizing fraud detection

How AI is Revolutionizing Fraud Detection

Artificial intelligence – commonly known as AI – means a form of technology with multiple uses. As a result, it has become extremely valuable to a number of businesses across

AI innovation

Companies Leading AI Innovation in 2023

Artificial intelligence (AI) has been transforming industries and revolutionizing business operations. AI’s potential to enhance efficiency and productivity has become crucial to many businesses. As we move into 2023, several

data fivetran pricing

Fivetran Pricing Explained

One of the biggest trends of the 21st century is the massive surge in analytics. Analytics is the process of utilizing data to drive future decision-making. With so much of

kubernetes logging

Kubernetes Logging: What You Need to Know

Kubernetes from Google is one of the most popular open-source and free container management solutions made to make managing and deploying applications easier. It has a solid architecture that makes

ransomware cyber attack

Why Is Ransomware Such a Major Threat?

One of the most significant cyber threats faced by modern organizations is a ransomware attack. Ransomware attacks have grown in both sophistication and frequency over the past few years, forcing

data dictionary

Tools You Need to Make a Data Dictionary

Data dictionaries are crucial for organizations of all sizes that deal with large amounts of data. they are centralized repositories of all the data in organizations, including metadata such as

©2023 Copyright DevX - All Rights Reserved. Registration or use of this site constitutes acceptance of our Terms of Service and Privacy Policy.