www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Inserting data into table rows using JavaScript.

  1. #1
    Join Date
    Jan 2014
    Posts
    10

    resolved [RESOLVED] Inserting data into table rows using JavaScript.

    Hello, beginner/intermediate JavaScript learner here. This is my first programming language.

    I am messing around with inserting data into table rows and columns. I am studying JavaScript using lynda.com.

    I'm trying to set up a table with five columns. The table will show the width, height, area, and perimeter of each rectangle. I am trying to do this using an event handler function I copy and pasted from lynda.com:




    if (typeof (com_joemarini) == "undefined" || !com_joemarini) var com_joemarini = {};
    else if (com_joemarini && typeof(com_joemarini) != "object")
    throw new Error("com_joemarini is not an Object type");

    com_joemarini.EVENTS = {
    NAME: "Event handling module",
    VERSION: 1.0,

    addEventHandler: function(oNode, sEvt, fnHandler, bCapture) {
    if (typeof (oNode.attachEvent) != "undefined")
    oNode.attachEvent("on" + sEvt, fnHandler);
    else
    oNode.addEventListener(sEvt, fnHandler, bCapture);
    },

    removeEventHandler: function(oNode, sEvt, fnHandler, bCapture) {
    if (typeof (oNode.detachEvent) != "undefined")
    oNode.detachEvent("on" + sEvt, fnHandler);
    else
    oNode.removeEventListener(sEvt, fnHandler, bCapture);
    },

    getEventTarget: function(evt) {
    if (typeof(window.event.srcElement) != "undefined") return window.event.srcElement;
    else return evt.target;
    },

    stopEvent: function(evt) {
    if (typeof(window.event.cancelBubble) != "undefined") window.event.cancelBubble=true;
    else evt.stopPropagation();
    },

    preventDefault: function(evt) {
    if (typeof(window.event.returnValue) != "undefined") window.event.returnValue=false;
    else evt.preventDefault();
    }
    }




    This will be important later on. This is the code lynda.com set up to make event handlers work.

    Here is the rest of the code, the part I'm having a problem with followed by the event handler which is supposed to load it all onto my page:




    function rectangleData() {

    function Rectangle(w,h) {
    this.width = w;
    this.height = h;
    }

    var myRect1 = new Rectangle(5,6);
    var myRect2 = new Rectangle(7,8);
    var myRect3 = new Rectangle(4,12);
    var myRect4 = new Rectangle(10,3);
    var myRect5 = new Rectangle(8,8);

    Rectangle.prototype.width = function() {
    return this.width;
    }

    Rectangle.prototype.height = function() {
    return this.height;
    }

    Rectangle.prototype.area = function() {
    return (this.width * this.height);
    }

    }
    Rectangle.prototype.perimeter = function () {
    return ((this.width * 2) (this.height * 2));
    }
    function func1()
    {
    document.getElementById("myRect1.shape").innerHTML="Rectangle";
    document.getElementById("myRect1.width").innerHTML=myRect1.width;
    document.getElementById("myRect1.height").innerHTML=myRect1.height;
    document.getElementById("myRect1.area").innerHTML=myRect1.area;
    document.getElementById("myRect1.perimeter").innerHTML=myRect1.perimeter;
    }

    function func2()
    {
    document.getElementById("myRect2.shape").innerHTML="Rectangle";
    document.getElementById("myRect2.width").innerHTML=myRect2.width;
    document.getElementById("myRect2.height").innerHTML=myRect2.height;
    document.getElementById("myRect2.area").innerHTML=myRect2.area;
    document.getElementById("myRect2.perimeter").innerHTML=myRect2.perimeter;
    }

    function func3()
    {
    document.getElementById("myRect3.shape").innerHTML="Rectangle";
    document.getElementById("myRect3.width").innerHTML=myRect3.width;
    document.getElementById("myRect3.height").innerHTML=myRect3.height;
    document.getElementById("myRect3.area").innerHTML=myRect3.area;
    document.getElementById("myRect3.perimeter").innerHTML=myRect3.perimeter;
    }

    function func4()
    {
    document.getElementById("myRect4.shape").innerHTML="Rectangle";
    document.getElementById("myRect4.width").innerHTML=myRect4.width;
    document.getElementById("myRect4.height").innerHTML=myRect4.height;
    document.getElementById("myRect4.area").innerHTML=myRect4.area;
    document.getElementById("myRect4.perimeter").innerHTML=myRect4.perimeter;
    }
    function func5()
    {
    document.getElementById("myRect5.shape").innerHTML="Rectangle";
    document.getElementById("myRect5.width").innerHTML=myRect5.width;
    document.getElementById("myRect5.height").innerHTML=myRect5.height;
    document.getElementById("myRect5.area").innerHTML=myRect5.area;
    document.getElementById("myRect5.perimeter").innerHTML=myRect5.perimeter;
    }

    }

    com_joemarini.EVENTS.addEventHandler(window, "load", rectangleData,false);




    I want to pass in the data into this table:




    <table class="bored">
    <thead>
    <tr>
    <th class="intro">Shape</th>
    <th class="intro">Width</th>
    <th class="intro">Height</th>
    <th class="intro">Area</th>
    <th class="intro">Perimeter</th>
    </tr>
    </thead>

    <tbody>
    <tr id="myRect1">
    <td id="myRect1.shape"></td>
    <td id="myRect1.width"></td>
    <td id="myRect1.height"></td>
    <td id="myRect1.area"></td>
    <td id="myRect1.perimeter"></td>
    </tr>
    <tr id="myRect2">
    <td id="myRect2.shape"></td>
    <td id="myRect2.width"></td>
    <td id="myRect2.height"></td>
    <td id="myRect2.area"></td>
    <td id="myRect2.perimeter"></td>
    </tr>
    <tr id="myRect3">
    <td id="myRect3.shape"></td>
    <td id="myRect3.width"></td>
    <td id="myRect3.height"></td>
    <td id="myRect3.area"></td>
    <td id="myRect3.perimeter"></td>
    </tr>
    <tr id="myRect4">
    <td id="myRect4.shape"></td>
    <td id="myRect4.width"></td>
    <td id="myRect4.height"></td>
    <td id="myRect4.area"></td>
    <td id="myRect4.perimeter"></td>
    </tr>
    <tr id="myRect5">
    <td id="myRect5.shape"></td>
    <td id="myRect5.width"></td>
    <td id="myRect5.height"></td>
    <td id="myRect5.area"></td>
    <td id="myRect5.perimeter"></td>
    </tr>
    </tbody>
    </table>




    Using the code I posted I get nothing to show up except the <thead> part. I know there are probably a few different ways I can insert the data into the <tbody> using an event handler which loads the information as the page loads, but I'm lost. Any help would be great. Thank you!!!!!!

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>123</title>
    <script type="text/javascript">
    function d(id){return document.getElementById(id);}
    
    function Rectangle(name,shape,w,h){
    this.name=name;
    this.shape=shape;
    this.w=w;
    this.h=h;
    this.show();
    }
    
    Rectangle.prototype={
    width: function(){return this.w;},
    height: function(){return this.h;},
    area: function(){return this.w * this.h;},
    perimeter: function(){return (this.w * 2)+(this.h * 2);},
    show: function(){
    d(this.name+'.shape').innerHTML=this.shape;
    d(this.name+'.width').innerHTML=this.width();
    d(this.name+'.height').innerHTML=this.height();
    d(this.name+'.area').innerHTML=this.area();
    d(this.name+'.perimeter').innerHTML=this.perimeter();
    }
    }
    
    function rectangleData() {
    new Rectangle('myRect1','Rectangle',5,6);
    new Rectangle('myRect2','Rectangle',7,8);
    new Rectangle('myRect3','Rectangle',4,12);
    new Rectangle('myRect4','Rectangle',10,3);
    new Rectangle('myRect5','Rectangle',8,8);
    }
    
    window.onload=rectangleData;
    </script>
    </head>
    <body>
    <table class="bored">
     <thead>
     <tr>
     <th class="intro">Shape</th>
     <th class="intro">Width</th>
     <th class="intro">Height</th>
     <th class="intro">Area</th>
     <th class="intro">Perimeter</th>
     </tr>
     </thead>
    
     <tbody>
     <tr id="myRect1">
     <td id="myRect1.shape"></td>
     <td id="myRect1.width"></td>
     <td id="myRect1.height"></td>
     <td id="myRect1.area"></td>
     <td id="myRect1.perimeter"></td>
     </tr>
     <tr id="myRect2">
     <td id="myRect2.shape"></td>
     <td id="myRect2.width"></td>
     <td id="myRect2.height"></td>
     <td id="myRect2.area"></td>
     <td id="myRect2.perimeter"></td>
     </tr>
     <tr id="myRect3">
     <td id="myRect3.shape"></td>
     <td id="myRect3.width"></td>
     <td id="myRect3.height"></td>
     <td id="myRect3.area"></td>
     <td id="myRect3.perimeter"></td>
     </tr>
     <tr id="myRect4">
     <td id="myRect4.shape"></td>
     <td id="myRect4.width"></td>
     <td id="myRect4.height"></td>
     <td id="myRect4.area"></td>
     <td id="myRect4.perimeter"></td>
     </tr>
     <tr id="myRect5">
     <td id="myRect5.shape"></td>
     <td id="myRect5.width"></td>
     <td id="myRect5.height"></td>
     <td id="myRect5.area"></td>
     <td id="myRect5.perimeter"></td>
     </tr>
     </tbody>
     </table>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Jan 2014
    Posts
    10
    Thank you very much for your help. That cleaned things up a lot. I'm now trying to insert images of each rectangle into the DOM using javascript. I can obviously do that using html, but javascript is a different matter. I've named each img myRect1.jpg, myRect2.jpg, etc. Here's the code I tried (I commented the stuff that doesn't work):




    function d(id) {
    return document.getElementById(id);
    }

    function Rectangle(name,w,h) {
    this.name = name;
    this.w = w;
    this.h = h;
    this.show();
    }

    Rectangle.prototype= {
    width: function() {return this.w},
    height: function() {return this.h},
    area: function() {return this.w * this.h},
    perimeter: function() {return (this.w * 2)+(this.h * 2);},
    /* shape: function() {
    document.getElementById('myRect1.shape').innerHTML = "<img src='myRect1.jpg' />";
    document.getElementById('myRect2.shape').innerHTML = "<img class='rect' src='myRect2.jpg' />";
    document.getElementById('myRect3.shape').innerHTML = "<img class='rect' src='myRect3.jpg' />";
    document.getElementById('myRect4.shape').innerHTML = "<img class='rect' src='myRect4.jpg' />";
    document.getElementById('myRect4.shape').innerHTML = "<img class='rect' src='myRect5.jpg' />";
    }
    */
    show: function() {
    // d(this.name+'.shape').innerHTML=this.shape();
    d(this.name+'.width').innerHTML=this.width();
    d(this.name+'.height').innerHTML=this.height();
    d(this.name+'.area').innerHTML=this.area();
    d(this.name+'.perimeter').innerHTML=this.perimeter();
    }
    }

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    and please use the [code]your code goes here[/code] tags for posting your code

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>123</title>
    <script type="text/javascript">
    function d(id){return document.getElementById(id);}
    function rn(m,n){return Math.floor(Math.random()*(n-m))+m;}
    
    function Rectangle(name,shape,w,h){
    this.name=name;
    this.shape=shape;// this is useless now
    this.w=w;
    this.h=h;
    this.show();
    }
    
    Rectangle.prototype={
    width: function(){return this.w;},
    height: function(){return this.h;},
    area: function(){return this.w * this.h;},
    perimeter: function(){return (this.w * 2)+(this.h * 2);},
    sheip: function(){
    var colors='black,darkorange,green,lightsteelblue,yellow,navy'.split(','),
        bgcol=colors[rn(0,colors.length)];
    return '<div style="width:'+this.width()*10+'px;height:'+this.height()*10+'px;background-color:'+bgcol+';border:2px solid #ccc"></div>';
    /*
    or if you need images
    return '<img class="rect" src="'+this.name+'.jpg" alt="" />';
    */
    },
    show: function(){
    d(this.name+'.shape').innerHTML=this.sheip();
    d(this.name+'.width').innerHTML=this.width();
    d(this.name+'.height').innerHTML=this.height();
    d(this.name+'.area').innerHTML=this.area();
    d(this.name+'.perimeter').innerHTML=this.perimeter();
    }
    }
    
    function rectangleData() {
    new Rectangle('myRect1','Rectangle',5,6);
    new Rectangle('myRect2','Rectangle',7,8);
    new Rectangle('myRect3','Rectangle',4,12);
    new Rectangle('myRect4','Rectangle',10,3);
    new Rectangle('myRect5','Rectangle',8,8);
    }
    
    window.onload=rectangleData;
    </script>
    </head>
    <body>
    <table class="bored">
     <thead>
     <tr>
     <th class="intro">Shape</th>
     <th class="intro">Width</th>
     <th class="intro">Height</th>
     <th class="intro">Area</th>
     <th class="intro">Perimeter</th>
     </tr>
     </thead>
    
     <tbody>
     <tr id="myRect1">
     <td id="myRect1.shape"></td>
     <td id="myRect1.width"></td>
     <td id="myRect1.height"></td>
     <td id="myRect1.area"></td>
     <td id="myRect1.perimeter"></td>
     </tr>
     <tr id="myRect2">
     <td id="myRect2.shape"></td>
     <td id="myRect2.width"></td>
     <td id="myRect2.height"></td>
     <td id="myRect2.area"></td>
     <td id="myRect2.perimeter"></td>
     </tr>
     <tr id="myRect3">
     <td id="myRect3.shape"></td>
     <td id="myRect3.width"></td>
     <td id="myRect3.height"></td>
     <td id="myRect3.area"></td>
     <td id="myRect3.perimeter"></td>
     </tr>
     <tr id="myRect4">
     <td id="myRect4.shape"></td>
     <td id="myRect4.width"></td>
     <td id="myRect4.height"></td>
     <td id="myRect4.area"></td>
     <td id="myRect4.perimeter"></td>
     </tr>
     <tr id="myRect5">
     <td id="myRect5.shape"></td>
     <td id="myRect5.width"></td>
     <td id="myRect5.height"></td>
     <td id="myRect5.area"></td>
     <td id="myRect5.perimeter"></td>
     </tr>
     </tbody>
     </table>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Jan 2014
    Posts
    10
    Thank you so much, that helps me a lot. And sorry about not putting brackets in [code], rookie mistake.

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    You're welcome. this place is for those who needs help. and i would like to thank people who helped me as well, thank you friends ))
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles