Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old September 28th, 2006, 02:45 AM
Registered User
 
Join Date: Sep 2006
Location: , , .
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:

<html>
<head>
<script language="javascript" src="validateSecure.js"></script>
<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.name='strExtendedYear';
      selYear.options[0]=new Option('2006','2006');
      selYear.options[1]=new Option('2007','2007');
      selYear.options[2]=new Option('2008','2008');
      cellFirst.appendChild(selYear);

      // 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');
      cellSecond.appendChild(selMonth);

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

      // Fourth cell
      var cellFourth = row.insertCell(3);
      var toDelete = document.createElement('input');
      toDelete.type='checkbox';
      toDelete.name = 'strDelete';
      cellFourth.appendChild(toDelete);
    }
</script>
</head>
<BODY>
<link rel="stylesheet" href="styleAdmin.css">
<form>

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

<table width="600" border="0" cellpadding="3" id="dateTable">
    <tr>
        <td class="TDHeader" colspan="4">Extended End Date</td>
    </tr>
    <tr>
        <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>
    </tr>
       <tr>
          <td class="TDcolorgreyBold" colspan="1">
              <select name ="strExtendedYear">
                  <option value ="2006"/>2006
                <option value ="2007"/>2007
                <option value ="2008"/>2008
              </select>
          </td>
          <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
              </select>
          </td>
          <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>
          <td class="TDcolorgreyBold" colspan="1">
              <input type = "checkbox" name="strDelete" value="1"/>
          </td>
        </tr>
        <tr>
            <td class="TDcolorgreyBold" colspan="4"> No records found </td>
        </tr>
</table>
<input type="hidden" name="noOfRowsInList" value="1">
<input type="hidden" name="currentYear" value="2006">
<table width="600" border="0" cellpadding="3">
    <tr>
      <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"/>
      </td>
    </tr>
</table>

</form>
</BODY>
</html>


thnx in advance

Reply With Quote
  #2 (permalink)  
Old September 28th, 2006, 02:51 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

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

Joe (Microsoft MVP - XML)
Reply With Quote
  #3 (permalink)  
Old September 28th, 2006, 03:52 AM
Registered User
 
Join Date: Sep 2006
Location: , , .
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default

thnx buddy...
it worked..

Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 01:54 PM.


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