|
|
 |
|
|
Thread Tools | Display Modes |
Oct 1st, 2007, 10:06 PM
|
#1 |
|
Newbie
Join Date: Oct 2007
Posts: 3
Rep Power: 0
 |
Changing table cell contents using DHTML
Hi. I hope it's not too presumptuous of me to ask for help in just my second post, but I'm having a little problem here and my understanding of the JavaScript DOM is spotty at best.
What I'm trying to do is have a 2-cell horizontally laid out table that functions thus: The left-hand cell contains an unordered list of links and the right cell contains HTML-formatted content consisting of a single image and some wrapped text. Clicking one of a list of hyperlinks in a left-hand table cell triggers changes to the contents of the right-hand cell. Is there a way to store the HTML for the content cell into a string variable or an array, and then to write the appropriate variable's contents into the right-hand cell when clicking each link? Or maybe just place the html right into the <a> tag for each list item? |
|
|
|
Oct 2nd, 2007, 12:17 AM
|
#2 |
|
Newbie
Join Date: Oct 2007
Posts: 3
Rep Power: 0
|
OK I got it to work in IE 6 but not in Firefox.
Here's what I've got so far:
<html>
<head>
<title>Stupid bitch-ass page that won't work in Firefox</title>
<script type="text/JavaScript1.2">
var i;
var blurb = new Array()
blurb[0] = "gobbldygook"
blurb[1] = "blahblahblah"
blurb[2] = "some crap"
blurb[3] = "even more crap"
blurb[4] = "yet still more crap"
blurb[5] = "damn this smells really bad"
blurb[6] = "can't think of anything better to write here"
blurb[7] = "geez this is stupid"
blurb[8] = "I'm tired of typing these dumb blurbs";
function changeContent(i){
document.getElementById("contentcell").innerHTML = blurb[i];
}
</script>
</head>
<body>
<table>
<table id="mytable" cellspacing="0" cellpadding="0" border="1" width="100%">
<tr><td>
<table border="0" width="100%" id="table1" height="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="230" align="left" valign="top">
<ul>
<li><a href="javascript:changeContent('0')">Text sample 1</a></li>
<li><a href="javascript:changeContent('1')">Text sample 2</a></li>
<li><a href="javascript:changeContent('2')">Text sample 3</a></li>
<li><a href="javascript:changeContent('3')">Text sample 4</a></li>
<li><a href="javascript:changeContent('4')">Text sample 5</a></li>
<li><a href="javascript:changeContent('5')">Text sample 6</a></li>
<li><a href="javascript:changeContent('6')">Text sample 7</a></li>
<li><a href="javascript:changeContent('7')">Text sample 8</a></li>
<li><a href="javascript:changeContent('8')">Text sample 9</a></li>
</ul>
</td>
</div>
<td id="contentcell"></td>
</tr>
</tbody>
</table>
</body>
</html>Last edited by eyeball_kid; Oct 2nd, 2007 at 12:59 AM. |
|
|
|
|
Oct 2nd, 2007, 12:32 AM
|
#3 | |
|
Expert Programmer
Join Date: Nov 2005
Posts: 837
Rep Power: 3
 |
Look into DOM manipulation methods. A few you might find useful:
Quote:
DOM manipulation can be tricky because some browsers, such as FireFox, insert text nodes between elements while others, such as IE, do not. Utilizing the Firebug plug-in for Firefox will make your life easier. You might also find this useful. |
|
|
|
|
|
| Bookmarks |
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Thread Tools | |
| Display Modes | |
|
|
Similar Threads
|
||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| [beginner] how to reverse the contents of a table | mariogarcia | Java | 4 | Nov 4th, 2005 3:12 AM |
| text in a table cell | glevine | JavaScript and Client-Side Browser Scripting | 5 | Jun 12th, 2005 8:37 AM |
| check cell one below - if found add to cell above | crmpicco | Visual Basic | 0 | May 9th, 2005 6:32 AM |
| word wrap in a table cell? | kerriganm | HTML / XHTML / CSS | 4 | May 6th, 2005 5:38 PM |
| Change background on a table row (or cell) | kurifu | Java | 2 | Jan 11th, 2005 6:38 PM |
Linear Mode
