Tabular Data Control and JavaScript

The tabular data control exposes a few properties and methods for any client-side language like JavaScript to manipulate. Some of the important ones are:

  • recordset : This property creates a reference point to the data file.
  • EOF : This property is used to check if we have reached the end of the file.
  • moveFirst() : Point to the first data item (first row).
  • moveNext() : Point to the next data item from previous position.
  • moveLast() : Point to the last data item (last row).
  • ondatasetcomplete : Event handler that fires when the control and its data has loaded.

In the below example, we'll use JavaScript to reference a TDC's data file, and display its 2nd row:


~Premshree Pillai~|~19~
~Bill Gates~|~18~

Corresponding HTML page:

<OBJECT ID="data3" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
	<PARAM NAME="DataURL" VALUE="data3.txt">
	<PARAM NAME="TextQualifier" VALUE="~">
	<PARAM NAME="FieldDelim" VALUE="|">

var dataSet=data3.recordset; //Get the complete data record set
dataSet.moveNext(); //Go to next data row

<SPAN DATASRC="#data3" DATAFLD="name"></SPAN>
<SPAN DATASRC="#data3" DATAFLD="age"></SPAN>
The output will be : Bill Gates 18

TDC JavaScript Ticker

By combining Tabular Data Control with JavaScript, the below example creates a ticker that retrieves its content from a txt file, and rotates/displays them:


message#messageURL tutorials and scripts# Java applets# help forum#
Premshree's Site#
Corresponding HTML page:
<script type="text/javascript">

//Note- Below example by
function tdcticker(){
	if (tickerSet.EOF) //if end of data's file

function init(){


<object id="ticker" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
	<param name="DataURL" value="tickerdata.txt">
	<param name="UseHeader" value="TRUE">
	<param name="FieldDelim" value="#">

<a href="" datasrc="#ticker" datafld="messageURL"
style="width:260px; border:1px solid black; background-color:">
	<span id="tickerDiv" datasrc="#ticker" datafld="message"></span>

<script type="text/javascript">
if (document.all)

As you can see, Tabular Data Control is a great way to include simple database functionality on your site where a server-side db is not possible.

This tutorial is written by Premshree Pillai. Modified by for structure and content. Premshree is a freelance writer, writing on topics ranging from HTML, CSS, JavaScript to Perl, XML.