HTML, Javascript и JQuery

Question

HTML, Javascript и JQuery

0

Общая информация: Я пытаюсь создать таблицу с помощью JQuery mobile. До этого момента моя таблица выглядит хорошо, но у меня есть некоторые незначительные проблемы.

Вот код

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/jquery.mobile-1.4.2.min.css">
<script src="/jquery-1.10.2.min.js"></script>
<script src="/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>

В: Что я хочу сделать, так это использовать Jquery для вставки содержимого массива школ в правильные столбцы и строки. Я хотел сделать это, создав массив объектов, а затем вставьте соответствующий элемент в нужное место в таблице (где логотипы являются ссылками на изображения).

Я попытался использовать команды Jquery append и appendto в части скрипта моего html, но это не сработало. Также я попытался использовать document.getElementbyId(...), но это тоже не работало. Я считаю, что часть скрипта моего html никогда не называется.

Любые идеи приветствуются.

SeahawksRdaBest 14 апр. 2014, в 03:20

Источник

0

Во-первых, если вы беспокоитесь о том, что часть скрипта не вызывается, вы должны поместить alert () или console.log () где-нибудь в теге script или внутри функции schools чтобы увидеть, ударили ли по ней.
sadmicrowave 14 апр. 2014, в 00:50
0

да, я сделал это Это не было ударом. Не знаю, почему жестко.
SeahawksRdaBest 14 апр. 2014, в 00:51
1

Вы скопировали свой код прямо из вашей программы или вводили его здесь вручную? Я спрашиваю, потому что я вижу ошибку в вашем javascript и не знаю, была ли это просто опечатка в вашем посте или фактически находится в вашем коде тоже. Вам не хватает запятой в конце новой школьной линии Stanford University
sadmicrowave 14 апр. 2014, в 01:07
0

на вашей странице также отсутствует один закрывающий </div> внизу, что может привести к неправильному отображению страницы, а не к тому, что ваш javascript не будет выполнен.
sadmicrowave 14 апр. 2014, в 01:09
0

OMG спасибо. Я буквально забыл запятую. И это сработало. Я исправил div раньше.
SeahawksRdaBest 14 апр. 2014, в 01:12
1

отлично! Я возьму очки в любом случае, я могу получить их ... ха
sadmicrowave 14 апр. 2014, в 01:13

Показать ещё 4 комментария

Теги:

javascript

jquery

html

1 ответ

Ещё вопросы

Во-первых, если вы беспокоитесь о том, что часть скрипта не вызывается, вы должны поместить alert () или console.log () где-нибудь в теге script или внутри функции schools чтобы увидеть, ударили ли по ней.
да, я сделал это Это не было ударом. Не знаю, почему жестко.
Вы скопировали свой код прямо из вашей программы или вводили его здесь вручную? Я спрашиваю, потому что я вижу ошибку в вашем javascript и не знаю, была ли это просто опечатка в вашем посте или фактически находится в вашем коде тоже. Вам не хватает запятой в конце новой школьной линии Stanford University
на вашей странице также отсутствует один закрывающий </div> внизу, что может привести к неправильному отображению страницы, а не к тому, что ваш javascript не будет выполнен.
OMG спасибо. Я буквально забыл запятую. И это сработало. Я исправил div раньше.
отлично! Я возьму очки в любом случае, я могу получить их ... ха

sadmicrowave · Answer 1 · 2014-04-13T22-27-00.000Z

Ссылка на schools[x].name и schools[x].image - это не то, как javascript, или jQuery, если на то пошло, выполнит их. Infact это, вероятно, как прямой текст в ваших тегах html <td> а не значение элемента массива, на которое вы надеетесь.

Вот что я буду делать.

Во-первых, добавьте соответствующий класс к каждому из элементов <td>, и rel attr, чтобы удерживать счетчик следующим образом:

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

Затем, итерации по каждому из элементов <td> в таблице, используя тег rel в качестве индекса массива для извлечения значений из; наконец, примените значения к тегам <td> с помощью функции .html('...'), например:

$.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 + '"/>' );
});

Я не тестировал это, но я думаю, что логика звучит...