Programming Forums - Changing table cell contents using DHTML

Programming Forums (http://www.programmingforums.org/forumindex.php)

- JavaScript and Client-Side Browser Scripting (http://www.programmingforums.org/forum23.html)

- - Changing table cell contents using DHTML (http://www.programmingforums.org/showthread.php?t=14088)

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?

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>

Look into DOM manipulation methods. A few you might find useful:

Quote:

document.createElement(string)
document.createTextNode(string)
node.cloneNode(bool)
node.appendChild(node)
node.insertBefore(node, node)
node.removeChild(node)
node.replaceChild(node, node)

This is a short list from the (highly recommended) book Beginning JavaScript with DOM Scripting and Ajax by Christian Heilmann. I posted it because I have yet to find such a concise yet useful list of such functions online.

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.