CODEWITHSUNDEEP
javascriptjqueryhtml
SeahawksRdaBest
SeahawksRdaBest

Reputation: 886

Html, Javascript & JQuery

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.

Upvotes: -1

Views: 112

Answers (1)

sadmicrowave
sadmicrowave

Reputation: 40912

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...

Upvotes: 1

Related Questions