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 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    25
    Thanks
    13
    Thanked 1 Time in 1 Post

    Making cell references to individual table cells

    So I am using JavaScript to make a table on a page and what I want to do is have the JavaScript create the table, and then allow the user to fill it with data. I have been able to make the JavaScript create the table, my question is how to reference the cells in my script that adds data to the cell. I want the users to be able to click a button an add data into different cells so i figured giving them each an Id and referring to that Id in the button is the best way to do it.

    How can I edit my code to give each cell a different Id? Or is there a better way of doing this?
    My table code looks like this (i have filled it with random data so it is not just a blank table).

    <code>
    <script type="text/javaScript">
    window.onload = fnInit;

    function fnInit()
    {
    // Declare variables and create the header, footer, and caption.
    var oTable = document.createElement("TABLE");
    var oTHead = document.createElement("THEAD");
    var oTBodyam = document.createElement("TBODY");
    var oTBodypm = document.createElement("TBODY");
    var oTFoot = document.createElement("TFOOT");
    var oCaption = document.createElement("CAPTION");
    var oRow, oCell;
    var i, j;

    // Declare stock data that would normally be read in from a stock Web site.
    var heading = new Array();

    heading[0] = "";
    heading[1] = "Monday";
    heading[2] = "Tuesday";
    heading[3] = "Wednesday";
    heading[4] = "Thursday";
    heading[5] = "Friday";
    var block = new Array();

    block[0] = "8:30";
    block[1] = "9:55";
    block[2] = "11:20";
    block[3] = "12:45";
    block[4] = "2:10";
    block[5] = "3:35";
    block[6] = "5:00";
    block[7] = "6:30";
    var stock = new Array();

    stock[0] = new Array(block[0],"88.625","85.50","85.81","99.54","55.46");
    stock[1] = new Array(block[1],"102.75","97.50","100.063","49.54","55.46");
    stock[2] = new Array(block[2],"56.125","54.50","55.688","99.54","55.46");
    stock[3] = new Array(block[3],"71.75","69.00","69.00","99.54","55.46");
    stock[4] = new Array(block[4],"71.75","69.00","69.00","99.54","55.46");
    stock[5] = new Array(block[5],"71.75","69.00","69.00","99.54","55.46");
    stock[6] = new Array(block[6],"71.75","69.00","69.00","99.54","55.46");
    stock[7] = new Array(block[7],"71.75","69.00","69.00","99.54","55.46");

    // Insert the created elements into oTable.
    oTable.appendChild(oTHead);
    oTable.appendChild(oTBodyam);
    oTable.appendChild(oTBodypm);
    oTable.appendChild(oTFoot);
    oTable.appendChild(oCaption);

    // Set the table's border width and colors.
    oTable.border=1;
    oTable.bgColor="lightslategray";

    // Insert a row into the header and set its background color.
    oRow = document.createElement("TR");
    oTHead.appendChild(oRow);
    oTHead.setAttribute("bgColor","lightskyblue");

    // 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<stock.length; i++)
    {
    var oBody = (i<3) ? oTBodyam : oTBodypm;
    oRow = document.createElement("TR");
    oBody.appendChild(oRow);
    for (j=0; j<stock[i].length; j++)
    {
    oCell = document.createElement("TD");
    oCell.innerHTML = stock[i][j];
    oRow.appendChild(oCell);
    }
    }
    </code>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    how about:

    Code:
    cellcount=0
    // Insert rows and cells into bodies.
    for (i=0; i<stock.length; i++)
    {
    var oBody = (i<3) ? oTBodyam : oTBodypm;
    oRow = document.createElement("TR");
    oBody.appendChild(oRow);
    for (j=0; j<stock[i].length; j++)
    {
    oCell = document.createElement("TD");
    oCell.innerHTML = stock[i][j];
    oCell.id="cellno"+cellcount++
    oRow.appendChild(oCell);
    }
    }

  • Users who have thanked xelawho for this post:

    dan9933 (04-17-2012)

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    25
    Thanks
    13
    Thanked 1 Time in 1 Post
    yeah that worked, thanks


  •  

    Tags for this Thread

    Posting Permissions

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