Taking Control of a table?

**Robert** · Jul 23 '05, 02:27 PM

Re: Taking Control of a table?

cmc_dermo@yahoo .co.uk (Craig) wrote in message news:<7baf4f57. 0410050512.3e2d 671@posting.goo gle.com>...
[color=blue]
> Rather than have to set the style for every cell individually in the
> first row, can I just set the style for the whole row? I would also
> like to hide certain rows, i understand I use the hidden function for
> this but how do I specify the rows I want to hide, for example I want
> to hide row 2.
>
> Once again many thanks![/color]

Glad to help out.

Try this version. I added a row id. The first row is row1.

Please note, the user will be able to exmine the data in the hidden
row by looking at the source code, via a dom inspector, or by writing
some javascript code and running the code from the command line.

Robert

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="author" >
<title>Overri de inline fonts</title>
<style type="text/css">

#mytable {visibility: hidden;
width: 400px;
height: 160px;}

/* Show how once font attributes are removed, we can use
the style attributes. */
tr td { font-size: x-large; }

/* Rows start with an index of one. */
#row1, #row4 { font-family: cursive; }
#row2 { display: none; }
#row3 { font-family: monospace; }

/* This is the id for the first cell in the table */
#row1cell1 { text-decoration: underline;
width: 400px;
height: 60px;}

#row3cell3 { font-family: cursive; }

/* Here is the last */
#row4cell4 { text-decoration: underline; }

</style>

<script type="text/javascript">
function adjust()
{
var t, theFonts, rows, theIds;

// Verify that we have the needed methods.
if (document.getEl ementById &&
document.getEle mentsByTagName)
{
// Start looking at the beginning of the table
t = document.getEle mentById("mytab le");

// Find all rows withing the table
rows = t.getElementsBy TagName("tr");

// Examine one row at a time.
for (var rowsLoop = 0; rowsLoop<rows.l ength; rowsLoop++)
{
// Add the row id. Row ids start with one.
rows[rowsLoop].id = "row" + ( rowsLoop + 1);

// Find the font tags in this row.
theFonts =
rows[rowsLoop].getElementsByT agName("font");
/*
Font tag properties have priority over CSS
attributes. I will blank out the font propeties
that I want the CSS rules to apply to. I'll set
the color to blue to show how you can change a
font property.
*/
// Find all the font tags in the row.
for (var i = 0; i<theFonts.leng th; i++)
{
if (theFonts[i].removeAttribut e)
{
theFonts[i].removeAttribut e("face");
theFonts[i].removeAttribut e("size");
}
else
{
// Well, nulling seems to work too.
theFonts[i].face = "";
theFonts[i].size = "";
}

theFonts[i].color = "blue";
}
// Zap in an id
// Please note the first cell in the table
// is row1cell1.
theIds =
rows[rowsLoop].getElementsByT agName("td");
for (var j = 0; j<theIds.length ; j++)
{
theIds[j].id = "row" + ( rowsLoop + 1 ) +
"cell" + ( j + 1) ;

}

} // end of loop on rows

// Display the table
if (t.style)
{ t.style.visibil ity = "visible"; }
else
{
alert("Oh, we have a table to display, " +
"but we cannot.");
}
}

}
</script>
</head>

<body id="documentbod y" onload="adjust( );">
<p>We will change this table after the page loads.</p>
<center>

<table id="mytable" cellpadding=3 cellspacing=0>
<TR>
<TD nowrap ALIGN="left">
<FONT FACE="Arial"
SIZE=3><IMG
SRC="http://spaceplace.nasa .gov/en/educators/images/solarsystem/idadactyl_T.jpg "
weight="10px"
height="10px"> Net Trade Working Capital</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3
color="red">147 ,345.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>70,111.0 0</FONT></TD>

<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>110.16</FONT></TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD nowrap ALIGN="left">
<FONT FACE="Arial"
SIZE=3><IMG
SRC="http://spaceplace.nasa .gov/en/educators/images/solarsystem/idadactyl_T.jpg "
weight="10px"
height="10px"> Net Trade Reserve Capital</FONT></TD>

<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>7,345.00 </FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3
color="red">7,1 11.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>11.16</FONT></TD>
<TD> </TD>

<TD> </TD>
</TR>
<TR>
<TD nowrap ALIGN="left">
<FONT FACE="Arial"
SIZE=3><IMG
SRC="http://spaceplace.nasa .gov/en/educators/images/solarsystem/idadactyl_T.jpg "
weight="10px"
height="10px"> Another Capital</FONT></TD>

<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>345.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3
color="red">111 .00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>1.16</FONT></TD>
<TD> </TD>

<TD> </TD>
</TR>
<TR>
<TD nowrap ALIGN="left">
<FONT FACE="Arial"
SIZE=3><IMG
SRC="http://spaceplace.nasa .gov/en/educators/images/solarsystem/idadactyl_T.jpg "
weight="10px"
height="10px"> Another Capital - last</FONT></TD>

<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>4.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3
color="red">3.0 0</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>2.16</FONT></TD>
<TD> </TD>

<TD> </TD>
</TR>
</table>
</center>

<p>The second row is not displayed.</p>
</body>

</html>

**Craig** · Jul 23 '05, 02:29 PM

Re: Taking Control of a table?

Works great Robert!

One more question . . . .

The report is dynamic and could have 10 rows or 60 rows of data.

Lets say I want the first 20 rows to have a certain style, can I loop
from 1 - 20 rather than have to edit the styles rows manually (ie.
type 20 styles), can i not just write a loop that sets the style for
all the rows?

Many thanks.

**Robert** · Jul 23 '05, 02:29 PM

Re: Taking Control of a table?

In article <7baf4f57.04100 61136.306a85d@p osting.google.c om>,
cmc_dermo@yahoo .co.uk (Craig) wrote:
[color=blue]
> Works great Robert!
>
> One more question . . . .
>
> The report is dynamic and could have 10 rows or 60 rows of data.
>[/color]
You can specify multiple ids in the same style directive. For example,
#row1, #row4 { font-family: cursive; }

The # indicates it matches an id and the comma separates ids.

I do not think there is a problem with defining nonexistent rows.

You could change the font values as I did with the color blue.

You could insert a span tag around the rows you want to be all the same
and define a style for this span.

You can define more style attributes on the table tag.
[color=blue]
> Many thanks.[/color]

Ok.

Robert

**Mark** · Jul 23 '05, 02:29 PM

Re: Taking Control of a table?

"Robert" wrote[color=blue]
> You could insert a span tag around the rows you want to be all the same
> and define a style for this span.[/color]

Really? IIRC <tr> elements may only be contained in <tbody> or <table>
elements. The latter implicitely creates the tbody if you specify one.
--
Ivo

**Michael Winter** · Jul 23 '05, 02:29 PM

Re: Taking Control of a table?

On Thu, 7 Oct 2004 04:55:46 +0200, Mark <mark@bark.hark > wrote:
[color=blue]
> "Robert" wrote
>[color=green]
>> You could insert a span tag around the rows you want to be all the same
>> and define a style for this span.[/color]
>
> Really? IIRC <tr> elements may only be contained in <tbody> or <table>
> elements. The latter implicitely creates the tbody if you specify one.[/color]

Correct. It also makes little sense to use a SPAN as a TR element, if
classified, would be a block-level element and it is invalid for inline
elements to contain block-level elements.

Use TBODY to group rows. That's what it's for.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Taking Control of a table?

Comment

Comment

Comment

Comment

Comment