|
Subject:
|
apply css class to dynamically generated table row
|
|
Posted By:
|
nikeshkm
|
Post Date:
|
9/28/2006 2:45:58 AM
|
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 By:
|
joefawcett
|
Reply Date:
|
9/28/2006 2:51:22 AM
|
The easiest way is to define a CSS class in a stylesheet, either linked or embedded such as:
.newRow
{
color: #dd0000;
background-color:#ffd700;
}
Then set the style using script:
var row = tbl.insertRow(lastRow);
row.className = "newRow";
--
Joe (Microsoft MVP - XML)
|
|
Reply By:
|
nikeshkm
|
Reply Date:
|
9/28/2006 3:52:08 AM
|
thnx buddy...
it worked..
|
|
