The Table DOM - Creating Table Elements Dynamically

SwansonSoftware Home | Site Index | View With Frames

Final Version 1.6, updated January 8 2004

This example demonstrates how to create table rows dynamically using the table object model. The table element itself is added to the html on the page, but you can create the table element dynamically also - for the example, having the table element visible on the page helps you see where the rows will be placed. Rows are added to the table when the user clicks the Add Row button. There is a 'clear' button to reset the table to its initial state and row count.

The example shows how to add rows to a table and put different kinds of controls in the table cells. It shows how to populate the controls with data returned from a prompt dialog displayed to the user. The prompt is brought up with a click on the button in the User Input column of the table.

Here is the <table> element that serves as the basis for this example:

<table id="tblDemo" bgcolor="#ffffcc" border="0" style="table-layout:fixed;">
</table>

Note that the ID tblDemo is used in the JavaScript functions to reference the table object.

This <table> element was put here to provide a base to build from, but that wasn't required: you can dynamically create the <table> element also. Setup of the table is started by calling the JavaScript function SetupDefaultTable() in the window.onLoad event, called from inside the <script> tag.

Javascript

The functionality presented in this example requires the following functions:

SetupDefaultTable() - The function uses the table ID to reference the table when creating elements for THEAD and TBODY. Each column header is added, then a loop is run through to add rows to the table.
AddRow(oTBody, intLoop) - adds controls to table cells before adding the cell to a row and then adding the row to the table.
initCombo(op) - In the AddRow function, a combo box is dynamically populated with options by a call to the JavaScript function initCombo(). initCombo() takes a reference to the combo box, and uses the DOM to create <option> elements.
AddNewRow() - When the user clicks 'Add Row' a new row is added to the table. Before we can call the AddRow function we need to create a reference to TBODY and find the number of rows in the table. What we need is another function - AddNewRow - where we perform these tasks to generate the parameters we will pass to AddRow.
GetInput(intLoop) - shows how to dynamically add data to fields created at runtime. Displays a prompt to the user, and adds the user's input to table cells or input fields.
ClearPage() - When the user clicks 'Clear' all the rows in the table are cleared of data and reset to their initial state.


   function SetupDefaultTable() Back to JavaScript
   {

      var oTable = document.all.tblDemo;

      // Set up the table header

      var oTHead = document.createElement("THEAD");

      oTHead.className = 'reports_header';

      oTable.appendChild(oTHead);

      var oRow = document.createElement("TR");
      oRow.height = '20';
      oTHead.appendChild(oRow);


      var oTH = document.createElement("TH");
      oTH.innerText = 'Option';
      oTH.width = '110';
      oTH.align = 'center'
      oTH.height = '15';
      oRow.appendChild(oTH);

      var oTH = document.createElement("TH");
      oTH.innerText = 'Col 1';
      oTH.width = '60';
      oTH.align = 'center'
      oRow.appendChild(oTH);

      var oTH = document.createElement("TH");
      oTH.innerText = 'User Input';
      oTH.width = '20';
      oRow.appendChild(oTH);

      var oTH = document.createElement("TH");
      oTH.innerText = 'Description';
      oTH.width = '200';
      oTH.align = 'center'
      oRow.appendChild(oTH);

      var oTH = document.createElement("TH");
      oTH.innerText = 'Check';
      oTH.width = '65';
      oTH.align = 'center'
      oRow.appendChild(oTH);

      // Finished setting up table header


      var oTBody = document.createElement("TBODY");

      oTable.appendChild(oTBody);

      var bResult;


      // We use a default value of 0 to create
      // the rows in the table.

      for (var i=0; i < 2; i++)
         bResult = AddRow(oTBody, i);

      return true;
   }

   window.onload = SetupDefaultTable;


   function AddRow(oTBody, intLoop) Back to JavaScript
   {

      var oCell;
      var oRow;

      // Create the row
      oRow = document.createElement("TR");
      oTBody.appendChild(oRow);


      // Create each cell and add to row

      oCell = document.createElement("TD");
      oCell.innerHTML = '<select CLASS="userData" size=1 id=fldTable' + intLoop + ' NAME=cboOp' + intLoop + '>></select>';
      oRow.appendChild(oCell);


      oCell = document.createElement("TD");
      oCell.innerHTML = '<INPUT CLASS="userData" ID=fldClassCode' + intLoop + ' NAME=txtCode' + intLoop + ' SIZE=10 MAXLENGTH=7>';
      oRow.appendChild(oCell);

      oCell = document.createElement("TD");
      oCell.innerHTML = '<INPUT id=button1 type=button value=Input.. name=cmdUserInput' + intLoop + ' onClick=\'GetInput(' + intLoop + ')\';>';
      oRow.appendChild(oCell);

      oCell = document.createElement("TD");
      oCell.innerHTML = '   ';
      oCell.id = 'txtDesc' + intLoop;
      oRow.appendChild(oCell);

      oCell = document.createElement("TD");
      oCell.innerHTML = '<INPUT CLASS="userData" ID=fldRemove' + intLoop + ' type=checkbox name=chkRemove' + intLoop + '>';
      oRow.appendChild(oCell);

      // Add option elements to dropdown list box

      var coll = document.all.tags("SELECT").item(intLoop);

      if ( coll != null )
         var bResult = initCombo(coll);
   }


   function initCombo(op) Back to JavaScript
   {
      //Populate the option list

      op.add(document.createElement("OPTION"));
      op.options[0].value = '';
      op.options[0].text = 'Select';
      op.options[0].selected = true;

      op.add(document.createElement("OPTION"));
      op.options[1].value = 'A';
      op.options[1].text = 'A';

      op.add(document.createElement("OPTION"));
      op.options[2].value = 'B';
      op.options[2].text = 'B';

      op.add(document.createElement("OPTION"));
      op.options[3].value = 'C';
      op.options[3].text = 'C';
   }


   function AddNewRow() Back to JavaScript
   {
      var oTBody = document.all.tblDemo.tBodies(1);

      // Note: we subtract one from the row count to
      // account for the header row.
      var intLoop = document.all.tblDemo.rows.length - 1;

      var bResult = AddRow(oTBody, intLoop);

      return true;
   }


   function GetInput(intLoop) Back to JavaScript
   {
      var undefined;

      var sResp = window.prompt("Get User Input","Enter something here.");
      if (!(sResp==undefined)) {
         document.all("txtCode" + intLoop.toString()).value = sResp;
         document.all("txtDesc" + intLoop.toString()).innerText = sResp;
      }
   }


   function ClearPage() Back to JavaScript
   {

      // Delete existing rows and reset the class codes table to 6 rows

      for (var i=document.all.tblDemo.rows.length; i>1; i--)
         document.all.tblDemo.deleteRow(i-1);


      // Add the default rows to class codes table.

      var oTBody = document.all.tblDemo.tBodies(1);

      for (var i=0; i < 2; i++)
         var bResult = AddRow(oTBody, i);
   }

Here is the example. Click the button in the User Input column to display the prompt and make a selection.

Top of page