Solved

How do I apply formatting to a JavaScript textNode Child?

Posted on 2006-06-12
3
1,281 Views
Last Modified: 2012-08-14
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>
<!-- scripts -->
<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>
0
Comment
Question by:edwill
  • 2
3 Comments
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
Comment Utility
Like this:

var row = tbl.insertRow(lastRow);
row.className = "yourStyleClassNameForRows";

Or you do it for every call:
var cellLeft = row.insertCell(0);
cellLeft.className = "Enrollment_InputBox";


0
 

Author Comment

by:edwill
Comment Utility
Thank you Zvonko! Your pointer works perfectly and I really appreciate your quick response!
0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
You are welcome.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now