为股票代码创建 Javascript 表

Question

我正在尝试使用 Javascript 股票行情，它进展顺利，但我的 Javascript 知识处于初级水平 - 但我正在学习！

• 当前代码使用 google 金融 API 提取实时股票数据。
• 查看股票首字母缩写词并打印公司全名
• 并且有一些不同的样式

我想要完成的是让股票数据在列中打印出来，我似乎无法在 html 中执行此操作，在查看 Javascript 表后，我认为这需要编写为 Javascript。

我需要创建 3 列； 1 为股票名称，例如（HAULOTTE），一种用于库存缩写，例如（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

这是一个基本的列示例，可以帮助您上路。它模仿了我对您要求的布局的理解。大体思路：嵌套divs，设置列width，对正确的容器使用float: leftdivs。

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