Html, Javascript & JQuery

Question

General info: I am trying to make a table using the JQuery mobile. Up to this point my table looks good however, I have some minor issues.

Here is the code

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<style>
th
{
border-bottom: 1px solid #d6d6d6;
}
tr:nth-child(even)
{
background:#e9e9e9;
}
</style>
</head>
<body>
<h1>My Name</h1>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1> Cs496 Hw2</h1>
    <h2> By: My Name here</h2>
  </div>
   
 <div data-role="main" class="ui-content">
    <table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable">
      <thead>
        <tr>
          <th data-priority="1">No.</th>
          <th>School Name</th>
          <th data-priority="2">LOGO</th>

        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td id="schoolName_0">schools[0].name</td>
          <td id="schoolImage_0">schools[0].image</td>
        </tr>
        <tr>
          <td>2</td>
          <td id="schoolName_1">schools[1].name</td>
          <td id="schoolImage_1">schools[1].image</td>
        </tr>
        <tr>
          <td>3</td>
          <td id="schoolName_2">schools[2].name</td>
          <td id="schoolImage_2">schools[2].image</td>
        </tr>
        <tr>
          <td>4</td>
          <td id="schoolName_3">schools[3].name</td>
          <td id="schoolImage_3">schools[3].image</td>
        </tr>
        
        <tr>
          <td>5</td>
          <td id="schoolName_4">schools[4].name</td>
          <td id="schoolImage_4">schools[4].image</td>
        </tr>

        <tr>
          <td>6</td>
          <td id="schoolName_5">schools[5].name</td>
          <td id="schoolImage_5">schools[5].image</td>
        </tr>
        
        <tr>
          <td>7</td>
          <td id="schoolName_6">schools[6].name</td>
          <td id="schoolImage_6">schools[6].image</td>
        </tr>
    
      </tbody>
    </table>
    
<script type='text/javascript'>

    function school(name,image){
        this.name = name;
        this.image = image;
    }

    var schools = [
        new school('Oregon State University', "http://www.sports-logos-screensavers.com/user/OregonStateBeavers.jpg"),
        new school('University of Oregon', "http://www.sports-logos-screensavers.com/user/Oregon_Ducks06.jpg"),
        new school('Stanford University', "http://www.sports-logos-screensavers.com/user/Stanford_Cardinal.jpg")
        new school('University of Southern California', "http://www.sports-logos-screensavers.com/user/USC_Trojans2.jpg"),
        new school('University of Washington', "http://www.sports-logos-screensavers.com/user/Washington_Huskies2.jpg"),
        new school('San Diego State University', "http://www.sports-logos-screensavers.com/user/SanDiegoStateAztecs3.jpg"),
        new school('Florida State University', "http://www.sports-logos-screensavers.com/user/FloridaStateSeminoles.jpg")
    ];
    
</script>
    
  </div>

</body>
</html>

Q: What I want to do is use Jquery to insert the contents of the schools array into the correct columns and rows. I wanted to do this by making an array of objects and then insert the associated element in the correct location in the table (where logos are links to images).

I have tried using both Jquery's append and appendto commands in the script portion of my html but that did not work. Also I tried using the document.getElementbyId(...) but that did'nt work either. I believe the script portion of my html is never being called.

Any Ideas are welcome.

first off, if you are worried about the script portion not being called you should put an alert() or console.log() somewhere in the script tag or inside the schools function to see if it is being hit. — sadmicrowave
– sadmicrowave, Commented Apr 14, 2014 at 0:50
yea I did that. It was not being hit. Do not know why tough. — SeahawksRdaBest
– SeahawksRdaBest, Commented Apr 14, 2014 at 0:51
did you copy your code straight from your program or did you manually type it in here? I ask because I see an error in your javascript and didn't know if it was just a typo in your post or actually resides in your code too. You are missing a comma at the end of the Stanford University new school line — sadmicrowave
– sadmicrowave, Commented Apr 14, 2014 at 1:07
your page also seems to be missing one closing </div> at the bottom, that would just make the page render improper though, not make your javascript not execute. — sadmicrowave
– sadmicrowave, Commented Apr 14, 2014 at 1:09

sadmicrowave · Accepted Answer · 2014-04-14 01:11:58Z

The reference to schools[x].name and schools[x].image is not how javascript, or jQuery for that matter, will execute those. Infact this is probably rendering as straight text in your html <td> tags rather than the array element value you are hoping for.

Here is what I would do.

First, add an appropriate class to each of the <td> elements, and a rel attr to hold the counter like so:

<tr>
      <td>1</td>
      <td class='name' rel='0'></td>
      <td class='image' rel='0'></td>
</tr>

Then, iterate over each of the <td> elements in the table, using the rel tag as the array index to retrieve the values from; finally, apply the values to the <td> tags with the .html('...') function, like so:

$.each( $("table#myTable tr td"), function(i,e){
     var $this = $(this), //set $(this) object to a variable rather than referencing it multiple times        
         rel = parseInt( $this.attr('rel') );
     //only look for td elements that have a class
     if( $this.hasClass('name') )
        $this.html( schools[ rel ].name );
     if( $this.hasClass('image') )
        $this.html( '<img src="' + schools[ rel ].image + '"/>' );
});

I haven't tested this, but I think the logic is sound...

Collectives™ on Stack Overflow

Html, Javascript & JQuery

Here is the code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Here is the code

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related