Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

mimicing a table 3

Status
Not open for further replies.

TheConeHead

Programmer
Aug 14, 2002
2,106
US
Here is my issue... I have a table... I need to be able to toggle between displaying and showing a number of rows... I tried to put these rows within a div and toggle the display attribute but this does not work, then I thought about reproducing the table in divs and such... what would anyone recommend... the table is much like a spreadsheet so the cells of the divs would need to match up... how would I go about this...

[conehead]
 
When you say a table, do you actually mean a data table, with rows and column headings and such?

In that case, simply use <table> - it's still allowed you know! Whilst every modern designer condemns <table> code for layout, if you're displaying a data table, it's still the most appropriate code to use.

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com
 
no I am using <table> and my issue is that I can not figure out how to toggle the disply of certain rows...

[conehead]
 
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC
	"-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
    <head>
        <title>test</title>
[COLOR=blue]        
        <script type="text/javascript">
			function setRowAttribute(rowNum, attrName, attrValue) 
			{
				table = document.getElementById('myTable');
				row = table.rows[rowNum];
				row.setAttribute(attrName, attrValue, 0);

			}
        </script>[/color]
        <style type="text/css">

        	table {
        		border-collapse: collapse;
        	}
        	td, th {
        		border: 1px #036 solid;
        		padding: 2px 4px;
        	}
        
        </style>
    </head>

    <body>
    	<p>
    		<a href="javascript:[COLOR=blue]setRowAttribute(prompt('Enter row number'), 'style', 'display:none')[/color]">hide row</a><br/>
    		<a href="javascript:[COLOR=blue]setRowAttribute(prompt('Enter row number'), 'style', 'display:table-row')[/color]">show row</a><br/>
    	</p>
    		
    
		<table id="myTable">
			<tr>
				<th>Heading 1</th>
				<th>Heading 2</th>
				<th>Heading 3</th>
			</tr>
			<tr>
				<td>Row 1 Data</td>
				<td>Row 1 Data</td>
				<td>Row 1 Data</td>
			</tr>
 			<tr>
				<td>Row 2 Data</td>
				<td>Row 2 Data</td>
				<td>Row 2 Data</td>
			</tr>
			<tr>
				<td>Row 3 Data</td>
				<td>Row 3 Data</td>
				<td>Row 3 Data</td>
			</tr>
			<tr>
				<td>Row 4 Data</td>
				<td>Row 4 Data</td>
				<td>Row 4 Data</td>
			</tr>
			<tr>
				<td>Row 5 Data</td>
				<td>Row 5 Data</td>
				<td>Row 5 Data</td>
			</tr>
		</table>				
	</body>
</html>
This POC should give you an idea.

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com
 
hmm...

it appears that the setAttribute function doesn't function in IE.

You'll have to access it via [tt][blue]style.display = 'none'[/blue][/tt] / [tt][blue]style.display = 'block'[/blue][/tt].

The principle's the same though :)

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com
 
If you want to display/hide whole sets of adjacent rows, you can use <tbody> elements to group rows together:
Code:
<table>
  <tbody id="group1">
    <tr><th>Heading 1</th><td>Data 1</td></tr>
    <tr><th>Heading 2</th><td>Data 2</td></tr>
    <tr><th>Heading 3</th><td>Data 3</td></tr>
  </tbody>
  <tbody id="group2">
    <tr><th>Heading 4</th><td>Data 4</td></tr>
    <tr><th>Heading 5</th><td>Data 5</td></tr>
    <tr><th>Heading 6</th><td>Data 6</td></tr>
  </tbody>
  <tbody id="group3">
    <tr><th>Heading 7</th><td>Data 7</td></tr>
    <tr><th>Heading 8</th><td>Data 8</td></tr>
    <tr><th>Heading 9</th><td>Data 9</td></tr>
  </tbody>
</table>
Then you should be able to change the display property of each tbody programatically.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
<tbody> is this a fairly new tag ? are there other table related tags ive not seen before... thanks for the info Chris.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
cool - why does w3c never tell you on those pages what HTML tag it is (i.e. HTML 2-3-4) etc...



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
wow - excellent link thanks, all those table tags and attributes I'd never seen before, probably because as it says, we've been using tables the wrong way for years (layout not tabular data).

I've added that to my favourites, so when I (or even if I) ever use the table tag (for the correct reason) i will be able to code it properly.

Moving away from tables for layout should also mean using tables and their corresponding tags correctly and fully.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top