当前位置: 动力学知识库 > 问答 > 编程问答 >

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.

网友答案:

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

分享给朋友:
您可能感兴趣的文章:
随机阅读: