• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5384
  • Last Modified:

Javascript Count Child Nodes

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
gwkg
Asked:
gwkg
  • 4
  • 3
  • 3
1 Solution
 
0h4crying0utloudCommented:


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

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

<td class="~~rowstyle$~~" style="text-transform:uppercase;" valign="top">~~item_description$~~</td>
0
 
gwkgAuthor Commented:
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
0h4crying0utloudCommented:


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
 
ZvonkoSystems architectCommented:
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
 
ZvonkoSystems architectCommented:
Sorry, properCase() can be reduced to this:

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

0
 
0h4crying0utloudCommented:


That style trick will not work. The new styles always use the original literals...
0
 
gwkgAuthor Commented:
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
 
gwkgAuthor Commented:
0
 
ZvonkoSystems architectCommented:
You are welcome.
And it looks like Zyloch did it right in the new question.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 4
  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now