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

Question

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

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

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

Мне нужно создать 3 колонки; 1 для названия запаса, например. (HAULOTTE), один для акции acroynm, например (PIG), и один для акций. Это гарантирует, что каждая строка данных запаса будет параллельна той, что указана выше и ниже.

Приложенный ток 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); 

     }); 
    } 
}); 

Answer 1

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

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; }