Hiding cell data in a table using JavaScript

11 New Member

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

     var tbl = document.getElementById("users_table");

    var tblRows = tbl.getElementsByTagName("tr");

    var rawData = tbl.getElementsByTagName("td");

    //tblRows.item(0).style.height = ("23px");
 
    for(j = 0; j < rawData.length; j++) {

        //rawData[j].style.display = "none";

        rawData[j].firstChild.style.display = "none";

    }
 
   // alert ("Raw data has been hidden")        

} // end hideRawData

Oct 12 '11 #1

Subscribe Reply

7677

Frinavale

9,735

Recognized Expert Moderator Expert

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

New Member

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

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>

    <title>Mod 3 ITP140 Client-Side Web Scripting</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

    <script type="text/javascript" src="js/mmillermod3.js"></script>

    <style type="text/css">

        <!--

        .total-row, .total-col {

            font-weight: bold;

        }

        table {

            empty-cells:show;

        }

        -->

    </style>

</head>
 
<body>

Type in your name:

<input type='text' id='nameinput' />

<input type='button' value='Put up alert box greeting the person by name' onclick='greet()' /><hr />
 
<input type='button' value='Add a row!' onclick='addRow();' />

<input type='button' value='Add a column!' onclick='addColumn();' />

<input type='button' value='Stylize Rows!' onclick='stylizeRows();' />

<input type='button' value='Total Columns!' onclick='totalColumns();' />

<input type='button' value='Total Rows!' onclick='totalRows();' />

<input type='button' value='Hide Raw Data!' onclick='hideRawData();' />

<input type='button' value='Unhide Raw Data!' onclick='unHideRawData();' />

<input type='button' value='Make table disappear' onclick='disappear();' />

<input type='button' value='Make table reappear' onclick='reappear();' />

<input type='button' value='Make table slowly fade out' onclick='$("#users_table").fadeOut(2000);' />
 
<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>
 
<hr />
 
<script type='text/javascript'>

    var tux = null;

    function toggleDisplay() {

        if (tux == null) {

            tux = document.getElementById('tux');

        }

        if (tux.style.display == 'none') {

            tux.style.display = 'inline';

        } else {

            tux.style.display = 'none';

        }

    } // end toggleDisplay

    function toggleVisibility() {

        // similar except use the visibility property

                alert("Gone!");

    } // end toggleVisibility

</script>
 
<input type='button' value='Toggle Display' onclick='toggleDisplay();' />

<input type='button' value='Toggle Visibility' onclick='toggleVisibility();' /><hr />

<img src='tux.gif' id='tux' width='244' height='256' alt='Tux' />

<hr />
 
</body>
 
</html>

Oct 12 '11 #3

Frinavale

9,735

Recognized Expert Moderator Expert

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

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
 
transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>

    <title>Mod 3 ITP140 Client-Side Web Scripting</title>

    <script type="text/javascript" 
 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

    <script type="text/javascript" src="js/mmillermod3.js"></script>

    <style type="text/css">

        <!--

        .total-row, .total-col {

            font-weight: bold;

        }

        table {

            empty-cells:show;

        }

        -->

    </style>
 
<script type="text/javascript">

function doIt()

{

   var tbl = document.getElementById("users_table");

    var tblRows = tbl.getElementsByTagName("tr");

    var rawData = tbl.getElementsByTagName("td");
 
    for(j = 0; j < rawData.length; j++) {

        rawData[j].firstChild.style.display = "none";

    }
 
} 
 
function UndoIt()

{

   var tbl = document.getElementById("users_table");

    var tblRows = tbl.getElementsByTagName("tr");

    var rawData = tbl.getElementsByTagName("td");
 
    for(j = 0; j < rawData.length; j++) {

        rawData[j].firstChild.style.display = "inline";

    }
 
}

</script>
 
</head>
 
<body>

<input type='button' value='Do It!' onclick='doIt();' />

<input type='button' value='Undo It!' onclick='UndoIt();' />

<table id="users_table" style="border:1px solid #000;border-collapse: collapse;" border='1'>

    <tr class="dataRow">

        <td><span>11</span></td>

        <td><span>12</span></td>

        <td><span>13</span></td>

    </tr>

    <tr class="dataRow">

        <td><span>21</span></td>

        <td><span>22</span></td>

        <td><span>23</span></td>

    </tr>

    <tr id="row3" class="dataRow">

        <td><span>31<span></td>

        <td><span>32</span></td>

        <td><span>33</span></td>

    </tr>

    <tr class="dataRow">

        <td><span>41</span></td>

        <td><span>42</span></td>

        <td><span>43</span></td>

    </tr>

</table>
 
</body>
 
</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

New Member

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

9,735

Recognized Expert Moderator Expert

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

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
 
transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>

    <title>Mod 3 ITP140 Client-Side Web Scripting</title>

    <script type="text/javascript" 
 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

    <script type="text/javascript" src="js/mmillermod3.js"></script>

    <style type="text/css">

        <!--

        .total-row, .total-col {

            font-weight: bold;

        }

        table {

            empty-cells:show;

        }

        -->

    </style>
 
<script type="text/javascript">

function doIt(visibilityValue)

{

   var tbl = document.getElementById("users_table");

    var tblRows = tbl.getElementsByTagName("tr");

    var rawData = tbl.getElementsByTagName("td");
 
    for(j = 0; j < rawData.length; j++) {

        rawData[j].firstChild.style.visibility = visibilityValue;

    }
 
} 
 
</script>
 
</head>
 
<body>
 
<input type='button' value='Do It!' onclick="doIt('hidden');" />

<input type='button' value='Undo It!' onclick="doIt('visible');" />
 
<table id="users_table" style="border:1px solid #000;border-collapse: collapse;" border='1'>

    <tr class="dataRow">

        <td><span>11</span></td>

        <td><span>12</span></td>

        <td><span>13</span></td>

    </tr>

    <tr class="dataRow">

        <td><span>21</span></td>

        <td><span>22</span></td>

        <td><span>23</span></td>

    </tr>

    <tr id="row3" class="dataRow">

        <td><span>31<span></td>

        <td><span>32</span></td>

        <td><span>33</span></td>

    </tr>

    <tr class="dataRow">

        <td><span>41</span></td>

        <td><span>42</span></td>

        <td><span>43</span></td>

    </tr>

</table>
 
</body>
 
</html>

Oct 12 '11 #6

shelzmike

New Member

That is fantastic - that solved both of the problems that I was having...

Oct 12 '11 #7

Similar topics

5657

how to I address this particular nested element?

by: Timo | last post by:

I'd be grateful for some help on this element addressing question. I want to change the font-size of the "H" of "Hello World" in the following HTML using first-letter, but cannot "reach" the...

HTML / CSS

1280

Help This Is Killing Me: Access to the path is denied

by: moondaddy | last post by:

This has worked before but not now for this project. I'm using vb.net and web services to talk to IIS and read and write to files (image files). I've gone in to the IIS MC and assigned write...

ASP.NET

782

Using Find of this particular object

by: rodchar | last post by:

Hey all, The following statement I understand: Dim oMsg As Outlook.MailItem = oItems.GetFirst But when I look at the other methods in oItems that might be helpful I'm not sure how to set the...

Visual Basic .NET

2091

OO javascript... this doesn't appear to point to the object

by: ensemble | last post by:

I'm trying to utilized a more object-oriented approach to managing window events in javascript. Thus, I am creating a "controller" object to handle events and interact with the server. However, I...

Javascript

1530

Why doesn't this string reverse work with the space for this particular string?

by: sherifffruitfly | last post by:

Hi all, I just wrote this up real quick, and it seems to work with a bunch of input strings (with and without spaces) except for the one in the code below: string input = "this is a string";...

C# / C Sharp

6798

this is killing me, still a GetTypes() error

by: Dan Holmes | last post by:

i have two classes that throw when GetTypes() is executed. The following are their signatures. public sealed class ProductService : IAF.TransactionComponent, IProductService public sealed...

C# / C Sharp

1830

How to define a this particular type?

by: suresh | last post by:

Hi, How to define a two dimensional array where each row is of type vector<map<string,int>>? My idea is, if "x" is such a variable, x is a vector where each cell of the vector is a...

C / C++

1274

Calvin Klein undergarments have a prominent presence on its website.This brand is quite popular among modern men. They are made from finest andsoftest fabrics to give that comfort you desire for. Even though the productsare of international quality,

by: service0086 | last post by:

Calvin Klein undergarments have a prominent presence on its website. This brand is quite popular among modern men. They are made from finest and softest fabrics to give that comfort you desire for....

C / C++

7132

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

7336

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

7063

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

7504

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

5640

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

5059

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

3211

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

1568

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

432

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

General