By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,480 Members | 1,224 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,480 IT Pros & Developers. It's quick & easy.

Hiding cell data in a table using JavaScript

shelzmike
P: 11
As mentioned, I am new to Javascript and have been given an assignment that to me seems way outside the normal scope of what I would ever do in the real world, but nonetheless, here goes.

I have a table that starts like this:
11 12 13
21 22 23
31 32 33
41 42 43

The html has no id's or spans or divs to work with and I cannot change that fact, this is purely traversing DOM stuff here.

We have an HTML page that has 12 buttons on it and each button as its own function that does something particular.

I have already figured out adding rows and columns (while dynamically updating the reference text in each cell appropriately), stylizing the rows, summing the rows and then columns, etc.

Now what I am stuck on is making the raw data (i.e. the text nodes) in each cell disappear with 1 function. (Problem is that there is a secondary function that will make it reappear so it makes it a little bit more difficult). I cannot use innerHTML - have to use DOM only. I also have to be sure the table does not collapse or disappear - only the values in each cell.

Any suggestions?


Sorry, forgot to add what I have done so far, well at least the step that I am on right now:Problem is, I get rawData[j].firstChild.style is undefined.

Expand|Select|Wrap|Line Numbers
  1.     var tbl = document.getElementById("users_table");
  2.     var tblRows = tbl.getElementsByTagName("tr");
  3.     var rawData = tbl.getElementsByTagName("td");
  4.     //tblRows.item(0).style.height = ("23px");
  5.  
  6.     for(j = 0; j < rawData.length; j++) {
  7.         //rawData[j].style.display = "none";
  8.         rawData[j].firstChild.style.display = "none";
  9.     }
  10.  
  11.    // alert ("Raw data has been hidden")        
  12. } // end hideRawData
Oct 12 '11 #1
Share this Question
Share on Google+
6 Replies


Frinavale
Expert Mod 5K+
P: 9,731
Could you please post the HTML for the table itself?
It sounds like there is no "first child" in the TD...


-Frinny
Oct 12 '11 #2

shelzmike
P: 11
Okay, sure...here it is and it is pretty bad, but this is what was given to us to use...I suppose it is the html equivalent of a "worksheet" :)

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <head>
  6.     <title>Mod 3 ITP140 Client-Side Web Scripting</title>
  7.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  8.     <script type="text/javascript" src="js/mmillermod3.js"></script>
  9.     <style type="text/css">
  10.         <!--
  11.         .total-row, .total-col {
  12.             font-weight: bold;
  13.         }
  14.         table {
  15.             empty-cells:show;
  16.         }
  17.         -->
  18.     </style>
  19. </head>
  20.  
  21. <body>
  22. Type in your name:
  23. <input type='text' id='nameinput' />
  24. <input type='button' value='Put up alert box greeting the person by name' onclick='greet()' /><hr />
  25.  
  26. <input type='button' value='Add a row!' onclick='addRow();' />
  27. <input type='button' value='Add a column!' onclick='addColumn();' />
  28. <input type='button' value='Stylize Rows!' onclick='stylizeRows();' />
  29. <input type='button' value='Total Columns!' onclick='totalColumns();' />
  30. <input type='button' value='Total Rows!' onclick='totalRows();' />
  31. <input type='button' value='Hide Raw Data!' onclick='hideRawData();' />
  32. <input type='button' value='Unhide Raw Data!' onclick='unHideRawData();' />
  33. <input type='button' value='Make table disappear' onclick='disappear();' />
  34. <input type='button' value='Make table reappear' onclick='reappear();' />
  35. <input type='button' value='Make table slowly fade out' onclick='$("#users_table").fadeOut(2000);' />
  36.  
  37. <table id="users_table" style="border:1px solid #000;border-collapse: collapse;" border='1'>
  38.     <tr class="dataRow">
  39.         <td>11</td>
  40.         <td>12</td>
  41.         <td>13</td>
  42.     </tr>
  43.     <tr class="dataRow">
  44.         <td>21</td>
  45.         <td>22</td>
  46.         <td>23</td>
  47.     </tr>
  48.     <tr id="row3" class="dataRow">
  49.         <td>31</td>
  50.         <td>32</td>
  51.         <td>33</td>
  52.     </tr>
  53.     <tr class="dataRow">
  54.         <td>41</td>
  55.         <td>42</td>
  56.         <td>43</td>
  57.     </tr>
  58. </table>
  59.  
  60. <hr />
  61.  
  62. <script type='text/javascript'>
  63.     var tux = null;
  64.     function toggleDisplay() {
  65.         if (tux == null) {
  66.             tux = document.getElementById('tux');
  67.         }
  68.         if (tux.style.display == 'none') {
  69.             tux.style.display = 'inline';
  70.         } else {
  71.             tux.style.display = 'none';
  72.         }
  73.     } // end toggleDisplay
  74.     function toggleVisibility() {
  75.         // similar except use the visibility property
  76.                 alert("Gone!");
  77.     } // end toggleVisibility
  78. </script>
  79.  
  80. <input type='button' value='Toggle Display' onclick='toggleDisplay();' />
  81. <input type='button' value='Toggle Visibility' onclick='toggleVisibility();' /><hr />
  82. <img src='tux.gif' id='tux' width='244' height='256' alt='Tux' />
  83. <hr />
  84.  
  85. </body>
  86.  
  87. </html> 
Oct 12 '11 #3

Frinavale
Expert Mod 5K+
P: 9,731
See, there are no child elements of the TD element.
Either put the numbers into something like a span or set the style of the TD element itself (probably not a good idea to to that though).

Something like this:

Expand|Select|Wrap|Line Numbers
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
  3.  
  4. transitional.dtd">
  5.  
  6. <html xmlns="http://www.w3.org/1999/xhtml">
  7.  
  8. <head>
  9.     <title>Mod 3 ITP140 Client-Side Web Scripting</title>
  10.     <script type="text/javascript" 
  11.  
  12. src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  13.     <script type="text/javascript" src="js/mmillermod3.js"></script>
  14.     <style type="text/css">
  15.         <!--
  16.         .total-row, .total-col {
  17.             font-weight: bold;
  18.         }
  19.         table {
  20.             empty-cells:show;
  21.         }
  22.         -->
  23.     </style>
  24.  
  25. <script type="text/javascript">
  26. function doIt()
  27. {
  28.    var tbl = document.getElementById("users_table");
  29.     var tblRows = tbl.getElementsByTagName("tr");
  30.     var rawData = tbl.getElementsByTagName("td");
  31.  
  32.     for(j = 0; j < rawData.length; j++) {
  33.         rawData[j].firstChild.style.display = "none";
  34.     }
  35.  
  36.  
  37.  
  38. function UndoIt()
  39. {
  40.    var tbl = document.getElementById("users_table");
  41.     var tblRows = tbl.getElementsByTagName("tr");
  42.     var rawData = tbl.getElementsByTagName("td");
  43.  
  44.     for(j = 0; j < rawData.length; j++) {
  45.         rawData[j].firstChild.style.display = "inline";
  46.     }
  47.  
  48. }
  49. </script>
  50.  
  51. </head>
  52.  
  53. <body>
  54. <input type='button' value='Do It!' onclick='doIt();' />
  55. <input type='button' value='Undo It!' onclick='UndoIt();' />
  56. <table id="users_table" style="border:1px solid #000;border-collapse: collapse;" border='1'>
  57.     <tr class="dataRow">
  58.         <td><span>11</span></td>
  59.         <td><span>12</span></td>
  60.         <td><span>13</span></td>
  61.     </tr>
  62.     <tr class="dataRow">
  63.         <td><span>21</span></td>
  64.         <td><span>22</span></td>
  65.         <td><span>23</span></td>
  66.     </tr>
  67.     <tr id="row3" class="dataRow">
  68.         <td><span>31<span></td>
  69.         <td><span>32</span></td>
  70.         <td><span>33</span></td>
  71.     </tr>
  72.     <tr class="dataRow">
  73.         <td><span>41</span></td>
  74.         <td><span>42</span></td>
  75.         <td><span>43</span></td>
  76.     </tr>
  77. </table>
  78.  
  79. </body>
  80.  
  81. </html> 
Note that you will have to take this into consideration for the other functions that use this table: the values aren't directly in the <td>'s any more....they are within the first child of the <td> elements...
Oct 12 '11 #4

shelzmike
P: 11
Actually, I got it to work that way already. The problem is that the table disappears completely. I tried setting the height attribute to 23px as you can see and that works vertically, but it just collapses horizontally.

I am assuming there is no real way around this (can't use a constrained width because if the rows are totaled or the table expands to where the number of characters the text is will screw it up). Like I said, this seems pretty dumb...I would never do it this way.

Then I had an epiphany - I could just change the text color to white and it would "appear" to disappear. This works to keep the table open; however, for some reason in all browsers besides Chrome, it actually colors the inner borders (cell borders) white as well, so it just makes a square. No one happens to know why this is do they?

Additionally, if the text is colored white and then they click the stylize button, the text in the colored rows becomes visible again. I am not so worried about that though really.

As far as why it is bad the table disappears? Well, there is also another function (as you can see in the HTML) that actually makes the table disappear, so I am assuming this needs to be different. Thanks again for the help though!

I am learning that DOM is awesome, but there is loads to learn!

Mike
Oct 12 '11 #5

Frinavale
Expert Mod 5K+
P: 9,731
In my example the table doesn't disappear...
It just becomes very small because there's no data in the cells

If you don't want this to happen then just set the visibility to hidden instead of setting display to none.

For example:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
  2.  
  3. transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6.  
  7. <head>
  8.     <title>Mod 3 ITP140 Client-Side Web Scripting</title>
  9.     <script type="text/javascript" 
  10.  
  11. src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  12.     <script type="text/javascript" src="js/mmillermod3.js"></script>
  13.     <style type="text/css">
  14.         <!--
  15.         .total-row, .total-col {
  16.             font-weight: bold;
  17.         }
  18.         table {
  19.             empty-cells:show;
  20.         }
  21.         -->
  22.     </style>
  23.  
  24. <script type="text/javascript">
  25. function doIt(visibilityValue)
  26. {
  27.    var tbl = document.getElementById("users_table");
  28.     var tblRows = tbl.getElementsByTagName("tr");
  29.     var rawData = tbl.getElementsByTagName("td");
  30.  
  31.     for(j = 0; j < rawData.length; j++) {
  32.         rawData[j].firstChild.style.visibility = visibilityValue;
  33.     }
  34.  
  35.  
  36.  
  37. </script>
  38.  
  39. </head>
  40.  
  41. <body>
  42.  
  43. <input type='button' value='Do It!' onclick="doIt('hidden');" />
  44. <input type='button' value='Undo It!' onclick="doIt('visible');" />
  45.  
  46. <table id="users_table" style="border:1px solid #000;border-collapse: collapse;" border='1'>
  47.     <tr class="dataRow">
  48.         <td><span>11</span></td>
  49.         <td><span>12</span></td>
  50.         <td><span>13</span></td>
  51.     </tr>
  52.     <tr class="dataRow">
  53.         <td><span>21</span></td>
  54.         <td><span>22</span></td>
  55.         <td><span>23</span></td>
  56.     </tr>
  57.     <tr id="row3" class="dataRow">
  58.         <td><span>31<span></td>
  59.         <td><span>32</span></td>
  60.         <td><span>33</span></td>
  61.     </tr>
  62.     <tr class="dataRow">
  63.         <td><span>41</span></td>
  64.         <td><span>42</span></td>
  65.         <td><span>43</span></td>
  66.     </tr>
  67. </table>
  68.  
  69. </body>
  70.  
  71. </html>
Oct 12 '11 #6

shelzmike
P: 11
That is fantastic - that solved both of the problems that I was having...
Oct 12 '11 #7

Post your reply

Sign in to post your reply or Sign up for a free account.