如何将标头添加到动态构造的表中？

Question

单击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/

Answer 1

你需要启动你的

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

这是小提琴

Answer 2

在进行for loop作用域之前，添加以下代码行

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

并将以下行添加到for loop作用域之后

htmldata += '</tbody>';

  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 = ''; }) } 

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

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