Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript
Javascript General Javascript discussions.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
Old September 28th, 2006, 02:45 AM
Registered User
Join Date: Sep 2006
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default apply css class to dynamically generated table row

I have a javascript function which will add rows dynamically.
But the problem is how should i apply css class to those dynamically generated rows. The code is as follows:

<script language="javascript" src="validateSecure.js"></script>
    function saveEntry()
        alert('I am saving your detials');
    function addRow()
      var tbl = document.getElementById('dateTable');
      var lastRow = tbl.rows.length;
      // if there's no header row in the table, then iteration = lastRow + 1
      var iteration = lastRow;
      var row = tbl.insertRow(lastRow);

      // First cell
      var cellFirst = row.insertCell(0);
      var selYear = document.createElement('select');
      selYear.options[0]=new Option('2006','2006');
      selYear.options[1]=new Option('2007','2007');
      selYear.options[2]=new Option('2008','2008');

      // Second cell
      var cellSecond = row.insertCell(1);
      var selMonth = document.createElement('select');
      selMonth.name = 'strExtendedMonth';
      selMonth.options[0]=new Option('01','01');
      selMonth.options[1]=new Option('02','02');
      selMonth.options[2]=new Option('03','03');
      selMonth.options[3]=new Option('04','04');
      selMonth.options[4]=new Option('05','05');
      selMonth.options[5]=new Option('06','06');
      selMonth.options[6]=new Option('07','07');
      selMonth.options[7]=new Option('08','08');
      selMonth.options=new Option('09','09');
      selMonth.options[9]=new Option('10','10');
      selMonth.options[10]=new Option('11','11');
      selMonth.options[11]=new Option('12','12');

      //Third cell
      var cellThird=row.insertCell(2);
      var textDay = document.createElement('input');
      textDay.type = 'text';
      textDay.name = 'strExtendedEndDay';
      textDay.size = 2;
      var textMonth = document.createElement('input');
      textMonth.type = 'text';
      textMonth.name = 'strExtendedEndMonth';
      textMonth.size = 2;
      var textYear = document.createElement('input');
      textYear.type = 'text';
      textYear.name = 'strExtendedEndYear';
      textYear.size = 4;

      // Fourth cell
      var cellFourth = row.insertCell(3);
      var toDelete = document.createElement('input');
      toDelete.name = 'strDelete';
<link rel="stylesheet" href="styleAdmin.css">

<table width="600" border="0" cellpadding="3">
      <td class="dealername" colspan="4">Administrator : Bristlecone</td>
      <td class="TDHeader" colspan="4">Retail Closing: User Management</td>
      <td class="TDcolorgreyBold" colspan="2">Retail Start Day:
      <td class="TDcolorgreyBold" colspan="2">
      <input type="text" name = "strStartDay" maxlength="2" value="25" size="2"/> </td>
      <td class="TDcolorgreyBold" colspan="2">Retail End Day:
      <td class="TDcolorgreyBold" colspan="2">
      <input type="text" name = "strEndDay" maxlength="2" value="27" size="2"/> </td>

<table width="600" border="0" cellpadding="3" id="dateTable">
        <td class="TDHeader" colspan="4">Extended End Date</td>
        <td class="TDcolorgreyBold" colspan="1">Year</td>
        <td class="TDcolorgreyBold" colspan="1">Month</td>
        <td class="TDcolorgreyBold" colspan="1">Extended End Date</td>
        <td class="TDcolorgreyBold" colspan="1">Remove / Delete</td>
          <td class="TDcolorgreyBold" colspan="1">
              <select name ="strExtendedYear">
                  <option value ="2006"/>2006
                <option value ="2007"/>2007
                <option value ="2008"/>2008
          <td class="TDcolorgreyBold" colspan="1">
              <select name ="strExtendedMonth">
                  <option value ="01">01
                <option value ="02">02
                <option value ="03">03
                <option value ="04">04
                <option value ="05">05
                <option value ="06">06
                <option value ="07">07
                <option value ="08">08
                <option value ="09">09
                <option value ="10">10
                <option value ="11">11
                <option value ="12">12
          <td class="TDcolorgreyBold" colspan="1">
              <input type="text" name ="strExtendedEndDay" onKeyup = "dateTab(this,document.forms[0].strExtendedEndMonth,'2')" maxlength='2' value="28" size="2"/>/
              <input type="text" name ="strExtendedEndMonth" onKeyup = "dateTab(this,document.forms[0].strExtendedEndYear,'2')" maxlength='2' value="08" size="2"/>/
              <input type="text" name ="strExtendedEndYear" onKeyup = "dateTab(this,document.forms[0].strDelete,'4')" onBlur="javascript:isDate(document.forms[0].strExtendedEndYear,document.forms[0].strExtendedEndMonth,document.forms[0].strExtendedEndDay)" maxlength='4' value="2006" size="4"/>
          <td class="TDcolorgreyBold" colspan="1">
              <input type = "checkbox" name="strDelete" value="1"/>
            <td class="TDcolorgreyBold" colspan="4"> No records found </td>
<input type="hidden" name="noOfRowsInList" value="1">
<input type="hidden" name="currentYear" value="2006">
<table width="600" border="0" cellpadding="3">
      <td class="TDHeader" colspan="2">
        <input type="button" name = "AddNewDate" value="Add New Date" onclick="javascript:addRow()" size="2"/> </td>
      <td class="TDHeader" colspan="2" align="right">
        <input type="button" name = "Submit" value="Submit" onclick="javascript:saveEntry()" size="2"/>


thnx in advance

Old September 28th, 2006, 02:51 AM
joefawcett's Avatar
Wrox Author
Join Date: Jun 2003
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts

The easiest way is to define a CSS class in a stylesheet, either linked or embedded such as:
  color: #dd0000;
Then set the style using script:
var row = tbl.insertRow(lastRow);
row.className = "newRow";

Joe (Microsoft MVP - XML)
Old September 28th, 2006, 03:52 AM
Registered User
Join Date: Sep 2006
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts

thnx buddy...
it worked..

Similar Threads
Thread Thread Starter Forum Replies Last Post
How to apply CSS to XSLT file??? rakesh XSLT 1 July 25th, 2008 03:20 AM
Dynamically generated dropdownlist csun ASP.NET 1.0 and 1.1 Basics 3 April 8th, 2008 07:38 AM
dynamically generated form SaraJaneQ Javascript How-To 4 November 9th, 2006 11:11 AM
dynamically generated submenus elladi Dreamweaver (all versions) 9 December 24th, 2004 08:12 AM

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.