如何将标题添加到动态构造的表中?

时间:2015-10-24 07:08:55

标签: javascript jquery html

点击li标签,我正在使用YQL并获取与之相关的数据。

请您告诉我如何以这种方式添加标题

名称,上次价格,更改,上次更新

我的代码的一部分

 if (DaysLow)
                {
   htmldata += '<tr>\
    <td>' + Name + '</td>\
    <td>' + LastTradePriceOnly + '</td>\
     <td>' + Change + '</td>\
    <td>' + ChangeinPercent + '</td>\
    <td>' + LastTradeTime + '</td>\
    </tr>';
                }
            }
        });

https://jsfiddle.net/24qgtfyw/1/

2 个答案:

答案 0 :(得分:2)

你需要发起你的

htmldata =  '<table><thead><th>Name</th><th>Last Price</th><th>Change</th><th>Last Updated</th></thead><tbody>';

 if (DaysLow)
                {
   htmldata += '<tr>\
    <td>' + Name + '</td>\
    <td>' + LastTradePriceOnly + '</td>\
     <td>' + Change + '</td>\
    <td>' + ChangeinPercent + '</td>\
    <td>' + LastTradeTime + '</td>\
    </tr>';
                }
            }
        });

htmldata += '</tbody></table>';

这里是fiddle

答案 1 :(得分:1)

for loop范围

之前添加以下代码行
htmldata += '<thead><th>Name</th><th>Last Price</th><th>Change</th><th>Last Updated</th></thead><tbody>';

for loop范围

之后添加以下行
htmldata += '</tbody>';

&#13;
&#13;
   jQuery("ul.tabs-1 li").click(function () {
       fetchDataForGlobalIndices('#tab-1-1');
   });
   var asia_symbols = ["%5EAORD", "%5ETWII"];

   function fetchDataForGlobalIndices(clickedtab) {
       if (clickedtab === '#tab-1-1') {
           fetchJSONFromYQL(asia_symbols, clickedtab);
       }
   }

   function fetchJSONFromYQL(symbolsarray, clickedtab) {
       var htmldata = '';
       var promises = [];
       
       htmldata += '<thead><th>Name</th><th>Last Price</th><th>Change</th><th>Last Updated</th></thead><tbody>';
       
       for (var i = 0; i < symbolsarray.length; i++) {
           var symbol = symbolsarray[i].trim();
           var query = "select * from yahoo.finance.quotes where symbol = " + "'" + symbol + "'";
           var yql = "https://query.yahooapis.com/v1/public/yql?q=" + escape(query) + "&format=json&diagnostics=false&env=store://datatables.org/alltableswithkeys&callback=?";
           var request = $.ajax({
               url: yql,
               dataType: 'json',
               async: false,
               timeout: 4000,
               success: function (data) {
                   var DaysLow = data.query.results.quote.DaysLow;
                   var DaysHigh = data.query.results.quote.DaysHigh || DEFAULT;
                   var ChangeinPercent = data.query.results.quote.ChangeinPercent || DEFAULT;
                   var Name = data.query.results.quote.Name || DEFAULT;
                   var LastTradeTime = data.query.results.quote.LastTradeTime || DEFAULT;
                   var LastTradePriceOnly = data.query.results.quote.LastTradePriceOnly || DEFAULT;
                   var Change = data.query.results.quote.Change || DEFAULT;
                   if (DaysLow) {
                       htmldata += '<tr>\
    <td>' + Name + '</td>\
    <td>' + LastTradePriceOnly + '</td>\
     <td>' + Change + '</td>\
    <td>' + ChangeinPercent + '</td>\
    <td>' + LastTradeTime + '</td>\
    </tr>';
                   }
               }
           });
           promises.push(request);
       }
        htmldata += '</tbody>';
       jQuery.when.apply(null, promises).done(function () {
           jQuery(clickedtab).html(htmldata);
           promises.length = 0;
           promises = [];
           htmldata = '';
       })
   }
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="">
     <h5 class="element-title">Global Indices</h5>

    <div class="list-container-1">
        <ul class="tabs-1 clearfix">
            <li><a href="#tab-1-1">ASIA </a>
            </li>
        </ul>
        <!--tabs-1-->
    </div>
    <!--list-container-1-->
    <div class="tab-container-1">
        <table id="tab-1-1" class="tab-content-1 table table-striped"></table>
        <!--tab-content-1-->
    </div>
    <!--tab-container-1-->
</div>
<!--end:kopa-one-two-->
&#13;
&#13;
&#13;

https://jsfiddle.net/kishoresahas/24qgtfyw/4/