Go Back   CodingForums.com > :: Client side development > JavaScript programming > DOM and JSON scripting

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 09-12-2012, 03:43 PM   PM User | #1
Raymond Cheyne
New Coder

 
Join Date: Sep 2012
Posts: 10
Thanks: 1
Thanked 0 Times in 0 Posts
Raymond Cheyne is an unknown quantity at this point
Creating a Hyper-Text Link

How would I make each of TableName_0, TableName_1, ... TableName_n a hyperlink to another HTML page somewhere?

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
<html lang="en">
 
    <head>
        <title>List</title>
        <script type="text/javascript">
            function fnInit() {
                // Declare variables and create the header, footer, and caption.
                var oTable = document.createElement("TABLE");
                var oTHead = document.createElement("THEAD");
                var oTBody = document.createElement("TBODY");
                var oRow, oCell;
                var i, j;
                var objOutput = document.getElementById("output");

                // Declare table data that would normally be read in from a table Web site.
                var heading = new Array();
                heading[0] = "Name";
                heading[1] = "Label";

                var table = new Array();
                table[0] = new Array("TableName_0", "Label_0");
                table[1] = new Array("TableName_1", "Label_1");
                table[2] = new Array(" ... ", " ... ");
                table[3] = new Array("TableName_n", "Label_n");

                // Insert the created elements into oTable.
                oTable.appendChild(oTHead);
                oTable.appendChild(oTBody);

                // Insert a row into the header.
                oRow = document.createElement("TR");
                oTHead.appendChild(oRow);

                // Create and insert cells into the header row.
                for (i = 0; i < heading.length; i++) {
                    oCell = document.createElement("TH");
                    oCell.innerHTML = heading[i];
                    oRow.appendChild(oCell);
                }

                // Insert rows and cells into bodies.
                for (i = 0; i < table.length; i++) {
                    oRow = document.createElement("TR");
                    oTBody.appendChild(oRow);
                    for (j = 0; j < table[i].length; j++) {
                        oCell = document.createElement("TD");
                        oCell.innerHTML = table[i][j];
                        oRow.appendChild(oCell);
                    }
                }

                // Insert the table into the document tree.
                objOutput.appendChild(oTable);
            }
        </script>
    </head>

    <body onload="fnInit();">
        <h1>List</h1>
        <div id="output"> </div>
    </body>

</html>
Thanks,
Raymond
Raymond Cheyne is offline   Reply With Quote
Old 09-13-2012, 03:34 PM   PM User | #2
Raymond Cheyne
New Coder

 
Join Date: Sep 2012
Posts: 10
Thanks: 1
Thanked 0 Times in 0 Posts
Raymond Cheyne is an unknown quantity at this point
How To Make Table Cells Hyperlinks Using DOM

Quote:
Originally Posted by Raymond Cheyne View Post
How would I make each of TableName_0, TableName_1, ... TableName_n a hyperlink to another HTML page somewhere?

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
<html lang="en">
 
    <head>
        <title>List</title>
        <script type="text/javascript">
            function fnInit() {
                // Declare variables and create the header, footer, and caption.
                var oTable = document.createElement("TABLE");
                var oTHead = document.createElement("THEAD");
                var oTBody = document.createElement("TBODY");
                var oRow, oCell;
                var i, j;
                var objOutput = document.getElementById("output");

                // Declare table data that would normally be read in from a table Web site.
                var heading = new Array();
                heading[0] = "Name";
                heading[1] = "Label";

                var table = new Array();
                table[0] = new Array("TableName_0", "Label_0");
                table[1] = new Array("TableName_1", "Label_1");
                table[2] = new Array(" ... ", " ... ");
                table[3] = new Array("TableName_n", "Label_n");

                // Insert the created elements into oTable.
                oTable.appendChild(oTHead);
                oTable.appendChild(oTBody);

                // Insert a row into the header.
                oRow = document.createElement("TR");
                oTHead.appendChild(oRow);

                // Create and insert cells into the header row.
                for (i = 0; i < heading.length; i++) {
                    oCell = document.createElement("TH");
                    oCell.innerHTML = heading[i];
                    oRow.appendChild(oCell);
                }

                // Insert rows and cells into bodies.
                for (i = 0; i < table.length; i++) {
                    oRow = document.createElement("TR");
                    oTBody.appendChild(oRow);
                    for (j = 0; j < table[i].length; j++) {
                        oCell = document.createElement("TD");
                        oCell.innerHTML = table[i][j];
                        oRow.appendChild(oCell);
                    }
                }

                // Insert the table into the document tree.
                objOutput.appendChild(oTable);
            }
        </script>
    </head>

    <body onload="fnInit();">
        <h1>List</h1>
        <div id="output"> </div>
    </body>

</html>
Thanks,
Raymond
Summary:
Given a table and a row within the table,
1. Create a table cell.
2. Append a text node to the cell.
3. Create a hyperlink.
4. Assign the <href> attribute of the hyperlink.
5. Append a text node to the hyperlink.
6. Append the hyperlink to the cell.
7. Append the cell to the row.

Example:
NewTableDataCell = document.createElement("TD");
CellText = document.createTextNode("New Table Cell Text");
NewTableDataCell.appendChild(CellText);
NewHyperLink = document.createElement("a");
NewHyperLink.href = "http://www.WebSite.com";
NewHyperLink.appendChild(CellText);
NewTableDataCell.appendChild(NewHyperLink);
ExistingTableRow.appendChild(NewTableDataCell);

Raymond
Raymond Cheyne is offline   Reply With Quote
Old 09-13-2012, 04:48 PM   PM User | #3
xelawho
Senior Coder

 
xelawho's Avatar
 
Join Date: Nov 2010
Posts: 2,437
Thanks: 52
Thanked 454 Times in 452 Posts
xelawho will become famous soon enoughxelawho will become famous soon enough
you're almost there...

Code:
// Insert rows and cells into bodies.
                for (i = 0; i < table.length; i++) {
                    oRow = document.createElement("TR");
                    oTBody.appendChild(oRow);
                    for (j = 0; j < table[i].length; j++) {
                        oCell = document.createElement("TD");
						NewHyperLink = document.createElement("a");
					NewHyperLink.href = "http://www.WebSite.com";
					NewHyperLink.appendChild(document.createTextNode(table[i][j]));
					oCell.appendChild(NewHyperLink);
                        oRow.appendChild(oCell);
                    }
                }
xelawho is offline   Reply With Quote
Old 09-13-2012, 06:27 PM   PM User | #4
Raymond Cheyne
New Coder

 
Join Date: Sep 2012
Posts: 10
Thanks: 1
Thanked 0 Times in 0 Posts
Raymond Cheyne is an unknown quantity at this point
Thank you!
Raymond Cheyne is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 11:49 PM.


Advertisement
Log in to turn off these ads.