Possible to shorten this script, or improve it?

[shelzmike]

Hey all, I am learning javascript at the moment and am loving the challenges. I spent a lot of time figuring out how to do this particular task, which I succeeded in doing; however, I am interested in determining if it can be done in a cleaner fashion...it seems like I should be able to.

Here is the general gist of what was done.

Have a table like so:
11 12 13
21 22 23
31 32 33
41 42 43

The initial HTML of this table is:

<table id="users_table" style="border:1px solid #000;border-collapse: collapse;" border='1'>
    <tr class="dataRow">
        <td>11</td>
        <td>12</td>
        <td>13</td>
    </tr>
    <tr class="dataRow">
        <td>21</td>
        <td>22</td>
        <td>23</td>
    </tr>
    <tr id="row3" class="dataRow">
        <td>31</td>
        <td>32</td>
        <td>33</td>
    </tr>
    <tr class="dataRow">
        <td>41</td>
        <td>42</td>
        <td>43</td>
    </tr>
</table>

I have a function that actually adds <span></span> tags to each of the <td>'s,

as an example:

<tr class="dataRow">
        <td><span>11</span></td>
        <td><span>12</span></td>
        <td><span>13</span></td>
    </tr>

The function in question is one that actually removes the <span> tags and returns the HTML to the original markup (and before anyone wonders why in the heck I want to do this - it is a challenge project for class, so there is no real rhyme or reason).

Now, I was able to do this with a function that essentially captures the childNode that holds the number data and store that in an array.

Then I remove all childNodes of all td tags, then finally append child nodes with the values from the array created above, like so:

function unHideRawData() {
  var tbl = document.getElementById("users_table");
  var tblRows = tbl.getElementsByTagName("tr");
  var rawData = tbl.getElementsByTagName("td");
 
  var removed = new Array();
  for (r=0; r < rawData.length; r++){
      removed[r] = rawData[r].firstChild.firstChild;
  }
 
  for (x=0; x < rawData.length; x++){
      if (rawData[x].hasChildNodes()) {
          while (rawData[x].childNodes.length >=1) {
            rawData[x].removeChild(rawData[x].firstChild);
        }
      }
  }
 
  for(k=0; k < rawData.length; k++){
      rawData[k].appendChild(removed[k]);
  }
 
  //alert("Raw data is now showing again");
} // end unHideRawData

So this works really well and took me a lot of trying to get here; however, can I make it any smaller, or condensed? i.e, can any steps be combined, etc.?

Thanks!

Mike

[Dormilich]

this is already small. the only optimisation I see is var removed = new Array(); => var removed = [];

[gits]

one more improvement would be to change things like this:

for (r=0; r < rawData.length; r++){

to this:

for (var r = 0, l = rawData.length; r < l; r++) {

this would avoid the evaluation of length in every step.

[shelzmike]

Thanks for the feedback!