Solved

Javascript Count Child Nodes

Posted on 2006-07-03
10
5,368 Views
Last Modified: 2011-10-03
Im stuck modifying an old template system and am having a problem.  The database only allows the description to be input in all capital letters and I need to change it to its proper capitalization after the page is loaded.  Here is how the .html template looks:

<table width="100%" border="0" cellpadding="0">
 <tr><th class="intrevrow">~~ITP.ItemNumberTitle$?a~~</th>
      <th class="intrevrow">~~ITP.ItemDescriptionTitle$?a~~</th>
      <th class="intrevrow">~~ITP.QtyAvailableTitle$?a~~</th>
      <th class="intrevrow">~~ITP.BasePriceTitle$?a~~</th>
        <th class="intrevrow">~~ITP.ShoppingCartTitle$?a~~</th></tr>
 <tr><td>~~iwwidb;products_dtl_form2_table?T~~</td></tr>
 <tr><td class="~~rowstyle$~~" valign="top"><nobr>~~item_detail_link$?a~~</nobr></td>
      <td class="~~rowstyle$~~" valign="top">~~item_description$~~</td>
      <td class="~~rowstyle$~~" align="right" valign="top">~~qty_avail$?a~~</td>
      <td class="~~rowstyle$~~" align="right" valign="top">~~base_price$~~</td>
      <td class="~~rowstyle$~~" align="center" valign="top" width="~~sc_width$~~">
         <font size=+1 color="red">~~error_flag$?a~~</font>
         <input type="hidden" name="~~row_item_name$~~" value="~~item$~~">
         <input type="~~mi_qty_fld$~~" name="~~row_quantity_name$~~" value="~~quantity$~~" size="4" maxlength="10"></td>
 </tr>
</table>

Here is the output (assuming on two products):

<table width="100%" border="0" cellpadding="0">
 <tr><th class="intrevrow">Item Number</th>
        <th class="intrevrow">Item Number/Description</th>
      <th class="intrevrow">Quantity Available</th>
      <th class="intrevrow">Base Price</th>
        <th class="intrevrow">Shopping Cart</th></tr>
 <tr><td></td></tr>
 <tr><td class="datacells" valign="top"><nobr><a class=datacells href="javascript:selectItem('CAM123X      1','CAMARMOR  CAM123X      ')">CAM123X</a></nobr></td>
        <td class="datacells" valign="top">CAM123X - INFRARED VARIFOCAL CAMERA<br />  </td>
      <td class="datacells" align="right" valign="top">18</td>
      <td class="datacells" align="right" valign="top">    129.00</td>
      <td class="datacells" align="center" valign="top" width="80">
            <font size=+1 color="red">&nbsp;&nbsp;</font>
            <input type="hidden" name="itm_000" value="CAM123X      1">
                <input type="text" name="qty_000" value="0" size="4" maxlength="10">
        </td>
 </tr>
 <tr><td class="datacells" valign="top"><nobr><a class=datacells href="javascript:selectItem('CAM321Z     1','CAMARMOR  CAM321Z      ')">CAM321Z</a></nobr></td>
      <td class="datacells" valign="top">CAM321Z - SONY POWER ZOOM CAMERA<br /></td>
      <td class="datacells" align="right" valign="top">123</td>
      <td class="datacells" align="right" valign="top">    895.00</td>
      <td class="datacells" align="center" valign="top" width="80">
           <font size=+1 color="red">&nbsp;&nbsp;</font>
         <input type="hidden" name="itm_001" value="CAM321Z     1">
         <input type="text" name="qty_001" value="0" size="4" maxlength="10">
        </td>
 </tr>
</table>

I need to capitalize every word of ~~item_description$~~ .  I don't have access to modify anything except this template, so I guess I need to modify it with a javascript function that I call on page load.  I can use ~~row_item_name$~~ to assign a unique ID to either the <td> tag or an added <span> tag wrapped around the description.  This will assign an id="itm_000", id="itm_001", etc.

The problem is that I dont have a way to get the count of items for this page once its loaded.  Is there a way, in javascript, to either get a count of all nodes with an id that begins with 'itm_' so I can execute a loop x amount of times.  OR is there another way to execute the function on all the nodes that contain ~~item_description$~~ ?

Thanks
0
Comment
Question by:gwkg
  • 4
  • 3
  • 3
10 Comments
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 17031673


Can you add some inline css? here Added some inline style:

<td class="~~rowstyle$~~" style="text-transform:uppercase;"valign="top">~~item_description$~~</td>
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 17031682
fixed spacing:

<td class="~~rowstyle$~~" style="text-transform:uppercase;" valign="top">~~item_description$~~</td>
0
 
LVL 31

Author Comment

by:gwkg
ID: 17031976
The inline CSS doesnt work.  It turns all the text lowercase with text-transform:lowercase, but text-transform:capitalize doesnt work as expected.  The letters remain all uppercase. (text-transform:uppercase uppercases all of the letters, which is how the output is to begin with)

Maybe if I wrap a span tag around the description and add link this style to the page

td.datacells span {text-transform:lowercase}

so the page loads in all lowercase and then dynamically change the style to

td.datacells span {text-transform:capitalize} on the page

will work.  It would definitely be easier than creating a function to uppercase the first letter of each word.  Although I will lose the flexibility of being able to split the description string and only change the capitalization of the words after 'MODEL123X - '

Is there an easy way to add a new style to the page after it loads?
0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 17032041


you can add another class name like "itemDesc" to the span:

<span id="itemDesc" class="itemDesc_low">~~item_description$~~</span>

Then after the page loads , call a function that changes the class:

<body onload="capit()">...</body>

<script>
function capit() {
  getElementById("itemDesc").className = "itemDesc_cap";
}
</script>
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
ID: 17032085
Here my proposal:

<html>
<head>
<title>Zvonko &#42;</title>
<script>
function changeLabels(){
  var theForm = document.forms[0];
  for(var i=0;iE=theForm["itm_"+((i>99)?"":(i>9)?"0":"00")+i];i++){
    var theCell = iE.parentNode.parentNode.cells[1];
    theCell.innerHTML=properCase(theCell.innerHTML);
  }
}
function properCase(theLabel){
  var theLabel = theLabel.toLowerCase().replace(/\b\w/g,function(p){return p.toUpperCase()});
  return theLabel;
}
</script>
</head>
<body>
<form>
<table width="100%" border="0" cellpadding="0">
 <tr><th class="intrevrow">Item Number</th>
        <th class="intrevrow">Item Number/Description</th>
     <th class="intrevrow">Quantity Available</th>
     <th class="intrevrow">Base Price</th>
        <th class="intrevrow">Shopping Cart</th></tr>
 <tr><td></td></tr>
 <tr><td class="datacells" valign="top"><nobr><a class=datacells href="javascript:selectItem('CAM123X      1','CAMARMOR  CAM123X      ')">CAM123X</a></nobr></td>
        <td class="datacells" valign="top">CAM123X - INFRARED VARIFOCAL CAMERA<br />  </td>
     <td class="datacells" align="right" valign="top">18</td>
     <td class="datacells" align="right" valign="top">    129.00</td>
     <td class="datacells" align="center" valign="top" width="80">
          <font size=+1 color="red">&nbsp;&nbsp;</font>
          <input type="hidden" name="itm_000" value="CAM123X      1">
                <input type="text" name="qty_000" value="0" size="4" maxlength="10">
        </td>
 </tr>
 <tr><td class="datacells" valign="top"><nobr><a class=datacells href="javascript:selectItem('CAM321Z     1','CAMARMOR  CAM321Z      ')">CAM321Z</a></nobr></td>
     <td class="datacells" valign="top">CAM321Z - SONY POWER ZOOM CAMERA<br /></td>
     <td class="datacells" align="right" valign="top">123</td>
     <td class="datacells" align="right" valign="top">    895.00</td>
     <td class="datacells" align="center" valign="top" width="80">
           <font size=+1 color="red">&nbsp;&nbsp;</font>
        <input type="hidden" name="itm_001" value="CAM321Z     1">
        <input type="text" name="qty_001" value="0" size="4" maxlength="10">
        </td>
 </tr>
</table>
</form>
<script>changeLabels()</script>
</body>
</html>




0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17032101
Sorry, properCase() can be reduced to this:

function properCase(theLabel){
  return theLabel.toLowerCase().replace(/\b\w/g,function(p){return p.toUpperCase()});
}

0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 17032163


That style trick will not work. The new styles always use the original literals...
0
 
LVL 31

Author Comment

by:gwkg
ID: 17032698
Wow Zvonko, works perfect and exactly what I was looking for!

I'll open another question pertaining to only capitalizing the words after the delimiter ' - ' and leaving the model number capitalized if you are interested in some more points.

Thanks again to everyone who took the time to answer!
0
 
LVL 31

Author Comment

by:gwkg
ID: 17032735
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17033463
You are welcome.
And it looks like Zyloch did it right in the new question.
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Add or delete table rows 10 53
100% tall div not scrollable on iPhone 3 20
jQuery force form POST 7 43
How  can  I extract  Id  from a  URL  using  Javascript? 12 29
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

789 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