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!

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

links, and hiding and showing table

Status
Not open for further replies.
SQLScholar

SQLScholar

Programmer
Aug 21, 2002
2,127
GB
hey all,

I am new to web based coding - so please bear with me.

I have created a website with asp.net which within the code connects to a mdb file and displays it in two asp tables.

Now what i need to do is to have table 1 clickable, and it change the data in table 2. How do i go about this? Can you point me in the correct direction? I understand i can do this but i need to use JS

Also i am not sure how i integrate javascript into my current stuff - so can someone point me in the correct direction.

Sorry for asking what is probably a really easy question - i did try googling but its hard to find stuff when you dont know what your asking for :)

Many thanks

Dan

----------------------------------------
Be who you are and say what you feel, because those who mind don't matter and those who matter don't mind - Dr. Seuss

Computer Science is no more about computers than astronomy is about telescopes - EW Dijkstra
----------------------------------------
 
Sort by date Sort by votes
Dan,

The code would really depend on what data is in the tables. Saying you want "one table clickable" gives no real indication of whether one mouse click anywhere on the whole table will do something to table 2, or whether you need individual cells to perform different actions.

Perhaps giving an idea of what data is in the tables, and what behaviour you want from each different piece of data would be a good starting point.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Thanks

The tables look something like

Person ID Name address
1 Bob here
2 chris there
3 james Everywhere
4 Bryan but not here

Person ID Book title
1 James Peach
2 Ryans foot
2 Da vinci
3 Bible
3 Another one
3 And again

So if you click on 3 in the top table it should refresh the bottom tables query and just show the 3 books for person id 3.

Hope this makes sense, and thanks for the advice.

Dan


----------------------------------------
Be who you are and say what you feel, because those who mind don't matter and those who matter don't mind - Dr. Seuss

Computer Science is no more about computers than astronomy is about telescopes - EW Dijkstra
----------------------------------------
 
Upvote 0 Downvote
If you wanted to make it truly real-time, so that the data loaded into the bottom table is always refreshed from the server when the upper table is clicked, then you'd need to either post the form back to the server, or use some sort of AJAX-type code (visit forum1600 for more on this).

If you already have the data on the page, and it won't be changing, then it's a lot simpler. Something like this:

Code: 
<html>
<head>

	<style type="text/css">

		#personTable td {
			cursor: pointer;
		}

	</style>

	<script type="text/javascript">

		window.onload = setUpTables;

		function setUpTables() {
			var personRows = document.getElementById('personTable').rows;

			// Start the loop at 1 so the thead isn't made clickable
			for (var loop=1; loop<personRows.length; loop++) {
				personRows[loop].onclick = personRowClicked;
			}
		}

		function personRowClicked() {
			// Get the ID from the first cell in the row
			var personId = this.cells[0].innerHTML;

			// Hide all rows in the lower table except those with the ID we want to show
			var bookRows = document.getElementById('bookTable').rows;

			// Start the loop at 1 so the thead isn't hidden
			for (var loop=1; loop<bookRows.length; loop++) {
				if (bookRows[loop].cells[0].innerHTML == personId) {
					bookRows[loop].style.display = '';
				} else {
					bookRows[loop].style.display = 'none';
				}
			}
		}

	</script>

</head>

<body>

	<table id="personTable" border="1">
		<thead>
			<tr>
				<th>Person ID</th>
				<th>Name</th>
				<th>Address</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>Bob</td>
				<td>Here</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Chris</td>
				<td>There</td>
			</tr>
			<tr>
				<td>3</td>
				<td>James</td>
				<td>Everywhere</td>
			</tr>
			<tr>
				<td>4</td>
				<td>Bryan</td>
				<td>But not here</td>
			</tr>
		</tbody>
	</table>

	<table id="bookTable" border="1">
		<thead>
			<tr>
				<th>Person ID</th>
				<th>Book title</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>James peach</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Ryans foot</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Da vinci</td>
			</tr>
			<tr>
				<td>3</td>
				<td>Work of fiction</td>
			</tr>
			<tr>
				<td>3</td>
				<td>Another one</td>
			</tr>
			<tr>
				<td>3</td>
				<td>And again</td>
			</tr>
		</tbody>
	</table>

</body>
</html>

I've tested it in IE 6, Fx 2, Safari 3 on Windows XP, and have seen no problems.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Sorry for not responding - project got put on hold. I was hoping that "tomorrow" it would come off hold. On hold indefinitely.

Sorry - but thanks for the help.

Dan

----------------------------------------
Be who you are and say what you feel, because those who mind don't matter and those who matter don't mind - Dr. Seuss

Computer Science is no more about computers than astronomy is about telescopes - EW Dijkstra
----------------------------------------
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
592
lexer
lexer
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
555
rogerte
rogerte
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
617
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
557
coldbohemia
coldbohemia
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
606
AbidingDude
AbidingDude

Part and Inventory Search

Sponsor

Back
Top