asked on

How do I apply formatting to a JavaScript textNode Child?

Hello All,
Can someone take a look at the enclosed code snip and tell me how to apply the same CSS class or style to the child iterations of document.createTextNode(iteration); as I have going in all the other cells...? The child row numbers needs to display in the same style/font as row number 1 when the page first loads. The child is directly under comment: //Row Number Iteration.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script language="JavaScript">
//Start Add Input Row function for Practice Member List
function addRowToTable()
{
var tbl = document.getElementById('practice_members');
var lastRow = tbl.rows.length;
// iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// Row Number Iteration
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
// Username
var cellRight = row.insertCell(1);
var el = document.createElement(
"<input class='Enrollment_InputBox' type='text' name='Username"+ iteration +"' id='Username"+ iteration +"' size='8' maxlength='15'>");
cellRight.appendChild(el);
// First Name
var cellRight = row.insertCell(2);
var el = document.createElement(
"<input class='Enrollment_InputBox' type='text' name='FirstName"+ iteration +"' id='FirstName"+ iteration +"' size='10' maxlength='20'>");
cellRight.appendChild(el);
// Middle Initial
var cellRight = row.insertCell(3);
var el = document.createElement(
"<input class='Enrollment_InputBox' type='text' name='MiddleInitial"+ iteration +"' id='MiddleInitial"+ iteration +"' size='1' maxlength='1'>");
cellRight.appendChild(el);
// Last Name
var cellRight = row.insertCell(4);
var el = document.createElement(
"<input class='Enrollment_InputBox' type='text' name='LastName"+ iteration +"' id='LastName"+ iteration +"' size='10' maxlength='15'>");
cellRight.appendChild(el);
// Name Suffix
var cellRight = row.insertCell(5);
var el = document.createElement(
"<input class='Enrollment_InputBox' type='text' name='NameSuffix"+ iteration +"' id='NameSuffix"+ iteration +"' size='2' maxlength='2'>");
cellRight.appendChild(el);
// Position or Role
var cellRight = row.insertCell(6);
var el = document.createElement(
"<input class='Enrollment_InputBox' type='text' name='LastName"+ iteration +"' id='LastName"+ iteration +"' size='10' maxlength='15'>");
cellRight.appendChild(el);
// UPIN
var cellRight = row.insertCell(7);
var el = document.createElement(
"<input class='Enrollment_InputBox' type='text' name='LastName"+ iteration +"' id='LastName"+ iteration +"' size='8' maxlength='10'>");
cellRight.appendChild(el);
// Email
var cellRight = row.insertCell(8);
var el = document.createElement(
"<input class='Enrollment_InputBox' type='text' name='Email"+ iteration +"' id='Email"+ iteration +"' size='25' maxlength='65'>");
cellRight.appendChild(el);
// Phone
var cellRight = row.insertCell(9);
var el = document.createElement(
"<input class='Enrollment_InputBox' type='text' name='Phone"+ iteration +"' id='Phone"+ iteration +"' size='15' maxlength='20'>");
cellRight.appendChild(el);
}
function removeRowFromTable()
{
var tbl = document.getElementById('practice_members');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
</script>

<style type="text/css">
<!--
.Enrollment_ColHead {color:#003399; font-family:Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal;}
.Enrollment_SubscriptText {font-family: Arial, Helvetica, sans-serif; font-size: xx-small; color: #003399;vertical-align: text-bottom;}
.Enrollment_InputBox {color: #003399;font-family: Arial, Helvetica, sans-serif;font-size: 10px;vertical-align: middle;}
.Enrollment_Asterik {color: red;vertical-align: middle;font-size: 10px;}
.Enrollment_Notation {font-family: Arial, Helvetica, sans-serif; font-size: xx-small;color: #003399;vertical-align: super;}
</style>
</head>

<body>
<cfform name="PracticeWorksheet" action="FormTester.cfm" method="post">
<table id="practice_members" width="598" border="1" cellpadding="0" cellspacing="0">
<tr>
<th> </th>
<th valign="bottom" class="Enrollment_ColHead">Username<span cass="Enrollment_Notation">1</span></th>
<th valign="bottom" class="Enrollment_ColHead">First Name</th>
<th valign="bottom" class="Enrollment_ColHead">M.I.</th>
<th valign="bottom" class="Enrollment_ColHead">Last Name</th>
<th valign="bottom" class="Enrollment_ColHead">Suffix</th>
<th valign="bottom" class="Enrollment_ColHead">Position or Role</th>
<th valign="bottom" class="Enrollment_ColHead">UPIN</th>
<th valign="bottom" class="Enrollment_ColHead">Email</th>
<th valign="bottom" class="Enrollment_ColHead">Phone</th>
</tr>
<tr>
<td class="Enrollment_InputBox" id="iteration">1</td>
<td><input class="Enrollment_InputBox" type="text" name="Username" id="Username" size="8" maxlength="15"></td>
<td><input class="Enrollment_InputBox" type="text" name="FirstName" id="FirstName" size="10" maxlength="20" ></td>
<td><input class="Enrollment_InputBox" type="text" name="MiddleInitial" id="MiddleInitial" size="1" maxlength="1"></td>
<td><input class="Enrollment_InputBox" type="text" name="LastName" id="LastName" size="10" maxlength="20"></td>
<td><input class="Enrollment_InputBox" type="text" name="NameSuffix" id="NameSuffix" size="2" maxlength="2"></td>
<td><input class="Enrollment_InputBox" type="text" name="PositionRole" id="PositionRole" size="10" maxlength="15"></td>
<td><input class="Enrollment_InputBox" type="text" name="UPIN" id="UPIN" size="8" maxlength="10"></td>
<td><input class="Enrollment_InputBox" type="text" name="Email" id="Email" size="25" maxlength="65"></td>
<td><input class="Enrollment_InputBox" type="text" name="Phone" id="Phone" size="15" maxlength="20"></td>
</tr>
</table>

<input type="button" value="Add a User" class="Enrollment_InputBox" onClick="addRowToTable()"; />
<input type="button" value="Remove Last User" class="Enrollment_InputBox"onclick="removeRowFromTable();" />
</p>
</cfform>
</body>
</html>

ASKER CERTIFIED SOLUTION

Zvonko

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

edwill

ASKER

Thank you Zvonko! Your pointer works perfectly and I really appreciate your quick response!

Zvonko

You are welcome.