Question

我发现这个guide来创建股票代码。
我试着将它改成一个html表，但我被卡住了。
所以，我创建了表格，但是我有很大的问题要划分每个变量我想要完成的是一个包含此列顺序的表：

符号：CompName
价格：价格
更改：PriceIcon + ChnageInPrice

％：PercentChnageInPrice

我现在所做的就是这一点，一列中的所有内容（因为我猜的是变量StockTickerHTML）
完整代码Link
能帮帮我吗？

    var CNames = "^FTSE,FTSEMIB.MI,^IXIC,^N225,^HSI,EURUSD=X";
    var flickerAPI = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + CNames + "%22)&env=store://datatables.org/alltableswithkeys";
    var StockTickerHTML = "";


    var StockTickerXML = $.get(flickerAPI, function(xml) {
        $(xml).find("quote").each(function () {
            Symbol = $(this).attr("symbol");
            $(this).find("Name").each(function () {
                CompName = $(this).text();
            });
            $(this).find("LastTradePriceOnly").each(function () {
                Price = $(this).text();
            });
            $(this).find("Change").each(function () {
                ChnageInPrice = $(this).text();
            });
            $(this).find("PercentChange").each(function () {
                PercentChnageInPrice = $(this).text();
            });

            var PriceClass = "GreenText", PriceIcon="up_green";
            if(parseFloat(ChnageInPrice) < 0) { PriceClass = "RedText"; PriceIcon="down_red"; }
            StockTickerHTML = StockTickerHTML + "<span class='" + PriceClass + "'>";
            StockTickerHTML = StockTickerHTML + "<span class='quote'>" + CompName + " </span> ";
            StockTickerHTML = StockTickerHTML + parseFloat(Price).toFixed(2) + " ";
            StockTickerHTML = StockTickerHTML + "<span class='" + PriceIcon + "'></span>" + parseFloat(Math.abs(ChnageInPrice)).toFixed(2) + " (";
            StockTickerHTML = StockTickerHTML + parseFloat( Math.abs(PercentChnageInPrice.split('%')[0])).toFixed(2) + "%)</span> </br>";
        });

        $("#dvStockTicker").html(StockTickerHTML);
        $("#dvStockTicker").jStockTicker({interval: 30, speed: 2});
    });
}

Answer 1

一种解决方案可能是这样的：
（参见代码中的评论）

＆＃13;

$(window).load(function() {
  StockPriceTicker();
  setInterval(function() {
    StockPriceTicker();
  }, 2 * 1000); // <------ we refresh each 2 seconds
});

// we get the table's body where 
// the lines will be inserted.
var $body = $('table tbody');

/*
   this will be the cache of 
   our lines, once they are prepared / transformed
   as your need, we will join and insert them
   in the body of our table.
*/
var Lines = [];

/*
  We define a function in charge of creating the HTML
  of each row of hour table, and then push them
  in the array defined above "Lines".
*/
var addLine = function(symbol, price, change, percent) {
  Lines.push('<tr>' +
    '<td class="symbol" >' + symbol  + '</td>' +
    '<td class="price"  >' + price   + '</td>' +
    '<td class="change" >' + change  + '</td>' +
    '<td class="percent">' + percent + '</td>' +
    '</tr>');
};

// this is your function to get data
function StockPriceTicker() {
  var Symbol = "",
      CompName = "",
      Price = "",
      ChnageInPrice = "",
      PercentChnageInPrice = "";

  var CNames = "^FTSE,FTSEMIB.MI,^IXIC,^N225,^HSI,EURUSD=X";
  var flickerAPI = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + CNames + "%22)&env=store://datatables.org/alltableswithkeys";

  var StockTickerXML = $.get(flickerAPI, function(xml) {
    $(xml).find("quote").each(function() {
      Symbol = $(this).attr("symbol");
      $(this).find("Name").each(function() {
        CompName = $(this).text();
      });
      $(this).find("LastTradePriceOnly").each(function() {
        Price = $(this).text();
      });
      $(this).find("Change").each(function() {
        ChnageInPrice = $(this).text();
      });
      $(this).find("PercentChange").each(function() {
        PercentChnageInPrice = $(this).text();
      });

      var PriceClass = "GreenText",
          PriceIcon = "up_green";

      if (parseFloat(ChnageInPrice) < 0) {
        PriceClass = "RedText";
        PriceIcon = "down_red";
      }

      /*
      
      We create the html to be inserted on each xml loop.
      
        - First : prepare and transform as you need
        - Last  : use the function we define above "addLine";
      */
      
      var htmlSymbol,
          htmlPrice,
          htmlChange,
          htmlPercent;

      htmlSymbol = "<span class='" + PriceClass + "'>";
      htmlSymbol = htmlSymbol + "<span class='quote'>" + CompName + " </span></span>";

      htmlPrice = parseFloat(Price).toFixed(2) + " ";

      htmlChange = parseFloat(Math.abs(ChnageInPrice)).toFixed(2) + "<span class='" + PriceIcon + "'></span>";

      htmlPercent = parseFloat(Math.abs(PercentChnageInPrice.split('%')[0])).toFixed(2) + "%";

      
      // We use here the function defined above.
      addLine(htmlSymbol, htmlPrice, htmlChange, htmlPercent);

    });

    
    /*
       Once the loop of reading the XML
       end, we have pushed all html in the array "Lines".
       So now we delete the content of our table's body, and
       we fill it with all the lines joined.
    */
    $body.empty().html(Lines.join(''));
    
    // we reset the content of Lines for the next interval
    Lines = [];

  });
}

＆＃13;

.GreenText {
  color: Green;
}
.RedText {
  color: Red;
}
.up_green {
  background: url(http://www.codescratcher.com/wp-content/uploads/2014/11/up.gif) no-repeat left center;
  padding-left: 10px;
  margin-right: 5px;
  margin-left: 5px;
}
.down_red {
  background: url(http://www.codescratcher.com/wp-content/uploads/2014/11/down.gif) no-repeat left center;
  padding-left: 10px;
  margin-right: 5px;
  margin-left: 5px;
}
table {
  border: solid;
  border-color: #666;
}
td {
  padding: 3px;
}
.symbol {
  border: solid 3px #DDD;
}
.price {
  border: solid 3px aqua;
}
.change {
  border: solid 3px yellow;
}
.percent {
  border: solid 3px purple;
}
td.price,
td.change,
td.percent {
  text-align: right;
}

tbody tr:nth-child(odd){
  background-color:#EEF;
}

tbody tr:nth-child(even){
  background-color:#AAA;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <table>
    <thead>
      <tr>
        <th class='symbol'>Symbol</th>
        <th class='price'>Price</th>
        <th class='change'>Change</th>
        <th class='percent'>%</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

＆＃13;

将Javascript变量移动到Html表中

1 个答案: