Создание таблиц Javascript для биржевого тикера

Я пытаюсь заставить работать биржевой тикер Javascript, все идет хорошо, но мои знания Javascript находятся на уровне новичка, но я учусь!

  • Текущий код извлекает данные об акциях с помощью финансового API Google.
  • Он проверяет наличие акронима акций и печатает полное название компании.
  • и имеет несколько различных стилей

То, что я пытаюсь выполнить, - это распечатать данные о запасах в столбцах, я, похоже, не могу сделать это в html, и, посмотрев на таблицы Javascript, я думаю, что это нужно записать как Javascript.

Мне нужно создать 3 столбца; 1 для названия акции, например (HAULOTTE), один для акроинма поголовья, например (СВИНЬЯ), а другой - для показателей поголовья. Это гарантирует, что каждая строка данных о запасах будет параллельна строкам над и под ней.

Прилагается текущий jsfiddle:

https://jsfiddle.net/feq3L57p/

var gstock = ["EPA:PIG","LON:AHT","NYSE:URI","NYSE:TEX" ,"NYSE:CAT", "NASDAQ:HEES", "NASDAQ:MNTX", "VIE:PAL" ];
$(document).ready(function () {
       for (var i = 0; i < gstock.length; i++) {
        $.getJSON("https://finance.google.com/finance/info?client=ig&q="+gstock[i]+"&callback=?", function (response) {
            var stockInfo1 = response[0];
            var divContainer =  $('*[data-symbol="' + stockInfo1.t +'"]');

            var stockString1 = '<div class="stockWrapper">' + divContainer.data('title') + ':';
            var stockName1 = stockInfo1.t;             
            stockString1 += '<span class="stockSymbol "> '  +  stockInfo1.t + ' </span>';
            stockString1 += '<span class="stockPrice "> '  +  stockInfo1.l  + '</span>';
            stockString1 += '<span class="stockChange "> '  +  stockInfo1.c + '</span>';
            stockString1 += '</div>';
            divContainer.append(stockString1);

        });
    }
});

javascript jquery google-finance
person user3036451    schedule 26.05.2015    source источник
comment
Спасибо за вашу помощь, к сожалению, я пробовал нечто подобное, но я не могу легко получить живые данные в html? Возможно, я делаю что-то не так, но я считаю, что единственный способ сделать это - создать таблицу javascript?   -  person user3036451    schedule 26.05.2015

Ответы (1)


arrow_upward
0
arrow_downward

Это базовый пример столбца, который должен вас заинтересовать. Он имитирует то, что я мог понять из запрошенного вами Layot. Общая идея: вложить divs, установить столбец width и использовать float: left для правильного контейнера divs.

HTML:

<div class="box">
<div class="floatleft2 " style="padding:5px;">
    <div>Stock Name Info</div>
    <div>Stock Name Info</div>
    <div>Stock Name Info</div>
    <div>Stock Name Info</div>
</div>
<div class="floatleft2" style="padding:5px;">
    <div>Symbol Info</div>
    <div>Symbol Info</div>
    <div>Symbol Info</div>
    <div>Symbol Info</div>
</div>
<div class="floatleft2" style="padding:5px;">
    <div>Figure Info</div>
    <div>Figure Info</div>
    <div>Figure Info</div>
    <div>Figure Info</div>
</div>
</div>

CSS:

.box {width:800px; margin:auto; }
.floatleft2 {float: left; width: 150px; margin:5px; }
person Sze-Hung Daniel Tsui    schedule 26.05.2015
comment
Спасибо за вашу помощь, к сожалению, я пробовал нечто подобное, но я не могу легко получить живые данные в html? Возможно, я делаю что-то не так, но я считаю, что единственный способ сделать это - создать таблицу javascript? - person user3036451; 27.05.2015
comment
Я не думаю, что вам нужно создавать таблицу, но вы определенно можете сделать это таким образом. Я уверен, что некоторые предпочитают использовать для этого таблицы. Для перевода живых данных в HTML потребуется больше знаний о jQuery. Не бойтесь немного поэкспериментировать с поисковыми запросами. Погуглить, как это сделать, - бесценный навык! Я бы начал с функций jQuery text и html. - person Sze-Hung Daniel Tsui; 27.05.2015
comment
Спасибо, я попробую. Я пытаюсь найти аналогичный рабочий пример, чтобы извлечь из него уроки. - person user3036451; 27.05.2015
comment
попробуйте написать addRow для набора информации и смоделировать его после того, что делается с таблицами здесь. Например, вызывая .append для каждого содержащего div в моем ответе. - person Sze-Hung Daniel Tsui; 27.05.2015