Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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

  • #2
    New Coder
    Join Date
    Sep 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,984
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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);
                        }
                    }

  • #4
    New Coder
    Join Date
    Sep 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •