從表格HTML獲取單元格的值

Question

我想從HTML表中獲取價值。

有一個表，其中包含三個對象（選擇了哪個紅線），我想獲取值（選擇了哪個綠線）。

我現在寫了這樣的東西

var divElement = document.querySelector('.panel-shadow-helper-with-shadow');
if(divElement)
{
    var divTableBody = divElement.querySelector('.yui-dt-data');

    for(i = 0; i < divTableBody.length - 1; i++)
    {
        var sellValue = divTableBody[i].querySelector(?????);
        var buyValue = divTableBody[i].querySelector(?????);

        console.log(sellValue, buyValue);
    }
}

但我不知道到位????? 。 我想讀取所有對象QB.D.xxxxxxxx.xx.IP sell和buy值， x替換為不同的數字。

任何想法？

Answer 1

選擇所有tr元素時，請使用querySelectorAll而不是querySelector 。

 var divElement = document.querySelector('.panel-shadow-helper-with-shadow'); if (divElement) { var divTableBody = divElement.querySelectorAll('.yui-dt-data tr'); for (var i = 0; i < divTableBody.length; i++) { var sellValue = divTableBody[i].querySelector('.yui-dt-col-sell').textContent.trim(); var buyValue = divTableBody[i].querySelector('.yui-dt-col-buy').textContent.trim(); console.log(sellValue, buyValue); } } 

 <div id="panel3" class="panel chrome ig-resizable newPanel panel-shadow-helper-with-shadow" data-panel="" style="min-height: 118px; display: block; z-index: 117; min-width: 159px; top: 43px; left: 223px; height: 350px; width: 1100px;"> <div class="panelTitleBar"> <div class="panelTabs tabset tabset-panel"> <div class="tabset-tab-wrapper"> <div data-tab="dealingRates" class="tabset-tab-panel tabset-tab tabset-tab-panel-active"><span class="title">Prices</span><span class="tabClose close"></span> </div> </div> </div> <div class="chromeControls noDrag"> <ul class="icons"> <li class="settings"> <a igtitle=""></a> </li> <li class="chartExpand panelExpand hidden"> <a href="#" data-action="expand" igtitle="Maximise"></a> </li> <li class="container-tearoff hidden"> <a href="#" igtitle="Open in new window"></a> </li> <li class="iClose"> <a igtitle="Close window"></a> </li> </ul> </div> </div> <div class="cIframeHolder"> <div class="view-holder ig-table-parent" data-uid="dealingRates" id="divDealingRates" style="top: 30px;"> <div class="table-holder-wrapper ig-table-container ig-table-puredeal-container market-list-type-list"> <div class="searchHeader"></div> <div class="resizeWidths dataTablePanel ig-table listView marketList" style="overflow: visible;" id="prices"> <div class="ig-table-head"> <table> <thead> <tr> <th data-column-id="market" class="yui-dt-col-market yui-dt-draggable" igtitle="Drag to move"> <div class="ig-table-cell-inner yui-dt-liner yui-resize"><span class="yui-dt-label"><div>Market</div></span> <div class="ig-table-resize-handle"></div> </div> </th> <th data-column-id="lightbulb" class="yui-dt-col-lightbulb yui-dt-draggable" igtitle="A highlighted icon means the signal was recently published#Drag to move"> <div class="ig-table-cell-inner yui-dt-liner"><span class="yui-dt-label">&nbsp;</span> </div> </th> <th data-column-id="superNews" class="yui-dt-col-superNews yui-dt-draggable" igtitle="Drag to move"> <div class="ig-table-cell-inner yui-dt-liner"><span class="yui-dt-label">&nbsp;</span> </div> </th> <th data-column-id="news" class="yui-dt-col-news yui-dt-draggable" igtitle="Drag to move"> <div class="ig-table-cell-inner yui-dt-liner"><span class="yui-dt-label">&nbsp;</span> </div> </th> <th data-column-id="chart" class="yui-dt-col-chart yui-dt-draggable" igtitle="Drag to move"> <div class="ig-table-cell-inner yui-dt-liner"><span class="yui-dt-label">&nbsp;</span> </div> </th> <th data-column-id="menu" class="yui-dt-col-menu yui-dt-draggable" igtitle="Drag to move"> <div class="ig-table-cell-inner yui-dt-liner"><span class="yui-dt-label">&nbsp;</span> </div> </th> <th data-column-id="displayPeriod" class="yui-dt-col-displayPeriod yui-dt-draggable" igtitle="Drag to move"> <div class="ig-table-cell-inner yui-dt-liner yui-resize"><span class="yui-dt-label"><div>Period</div></span> <div class="ig-table-resize-handle"></div> </div> </th> <th data-column-id="sell" class="yui-dt-col-sell yui-dt-draggable" igtitle="Drag to move"> <div class="ig-table-cell-inner yui-dt-liner yui-resize"><span class="yui-dt-label"><div>Sell</div></span> <div class="ig-table-resize-handle"></div> </div> </th> <th data-column-id="buy" class="yui-dt-col-buy yui-dt-draggable" igtitle="Drag to move"> <div class="ig-table-cell-inner yui-dt-liner yui-resize"><span class="yui-dt-label"><div>Buy</div></span> <div class="ig-table-resize-handle"></div> </div> </th> <th data-column-id="netChange" class="yui-dt-col-netChange yui-dt-draggable" igtitle="Click to sort#Drag to move"> <div class="ig-table-cell-inner yui-dt-liner yui-resize"><span class="yui-dt-label"><div>Change</div></span> <div class="ig-table-resize-handle"></div> </div> </th> <th data-column-id="percentageChange" class="yui-dt-col-percentageChange yui-dt-draggable" igtitle="Change on day (percentage)#Drag to move"> <div class="ig-table-cell-inner yui-dt-liner yui-resize"><span class="yui-dt-label"><div>% Chg</div></span> <div class="ig-table-resize-handle"></div> </div> </th> <th data-column-id="updateTime" class="yui-dt-col-updateTime yui-dt-draggable" igtitle="Drag to move"> <div class="ig-table-cell-inner yui-dt-liner yui-resize"><span class="yui-dt-label"><div>Update</div></span> <div class="ig-table-resize-handle"></div> </div> </th> <th data-column-id="high" class="yui-dt-col-high yui-dt-draggable" igtitle="Drag to move"> <div class="ig-table-cell-inner yui-dt-liner yui-resize"><span class="yui-dt-label"><div>High</div></span> <div class="ig-table-resize-handle"></div> </div> </th> <th data-column-id="low" class="yui-dt-col-low yui-dt-draggable" igtitle="Drag to move"> <div class="ig-table-cell-inner yui-dt-liner yui-resize"><span class="yui-dt-label"><div>Low</div></span> <div class="ig-table-resize-handle"></div> </div> </th> <th data-column-id="_extra" title="" class="yui-dt-col-_extra"> <div class="ig-table-cell-inner yui-dt-liner" style="width: 4000px;"><span class="yui-dt-label">&nbsp;</span> </div> </th> </tr> </thead> </table> </div> <div class="ig-table-body"> <table> <tbody class="yui-dt-data"> <tr data-record-id="QB.D.FT1345UD.01.IP" class="rec-QB.D.FT1345UD.01.IP"> <td class="yui-dt-col-market" data-column-id="market"> <div class="ig-table-cell-inner yui-dt-liner" style="width: 300px;"><a class="tableIcon dealOpen" igtitle="Status: Market Open#Action: Place new Deal">FTSE to be above 6280.28 at 1:50pm</a> </div> </td> <td class="yui-dt-col-lightbulb" data-column-id="lightbulb"> <div class="ig-table-cell-inner yui-dt-liner" style="width: 18px;"><a class="signal-status" href="#">&nbsp;</a> </div> </td> <td class="yui-dt-col-superNews" data-column-id="superNews"> <div class="ig-table-cell-inner yui-dt-liner" style="width: 18px;"><a class="superNewsIcon off" igtitle="Reuters Info" href="#">&nbsp;</a> </div> </td> <td class="yui-dt-col-news" data-column-id="news"> <div class="ig-table-cell-inner yui-dt-liner" style="width: 18px;"><a class="newsIcon off" href="#">&nbsp;</a> </div> </td> <td class="yui-dt-col-chart" data-column-id="chart"> <div class="ig-table-cell-inner yui-dt-liner" style="width: 18px;"><a class="basicChartIcon on" href="#" igtitle="Chart">&nbsp;</a> </div> </td> <td class="yui-dt-col-menu" data-column-id="menu"> <div class="ig-table-cell-inner yui-dt-liner" style="width: 18px;"><a class="optionsBtn" href="#" igtitle="Click for more options">&nbsp;</a> </div> </td> <td class="yui-dt-col-displayPeriod" data-column-id="displayPeriod"> <div class="ig-table-cell-inner yui-dt-liner" igtitle="" style="width: 80px;">06-JUN-16</div> </td> <td class="yui-dt-col-sell" data-column-id="sell"> <div class="ig-table-cell-inner yui-dt-liner" style="width: 60px;"> <div igtitle="Status: Market Open#Action: Place new Deal" class="dealOpen price priceFlashUp">17.4</div> </div> </td> <td class="yui-dt-col-buy" data-column-id="buy"> <div class="ig-table-cell-inner yui-dt-liner" style="width: 60px;"> <div igtitle="Status: Market Open#Action: Place new Deal" class="dealOpen price priceFlashUp">22.6</div> </div> </td> <td class="yui-dt-col-netChange" data-column-id="netChange"> <div class="ig-table-cell-inner yui-dt-liner blue" style="width: 69px;">0.5</div> </td> <td class="yui-dt-col-percentageChange" data-column-id="percentageChange"> <div class="ig-table-cell-inner yui-dt-liner blue" style="width: 68px;">6277.9</div> </td> <td class="yui-dt-col-updateTime" data-column-id="updateTime"> <div class="ig-table-cell-inner yui-dt-liner" style="width: 75px;"><span>13:45:31</span> </div> </td> <td class="yui-dt-col-high" data-column-id="high"> <div class="ig-table-cell-inner yui-dt-liner" style="width: 60px;"><span>100.0</span> </div> </td> <td class="yui-dt-col-low" data-column-id="low"> <div class="ig-table-cell-inner yui-dt-liner" style="width: 60px;"><span>0.0</span> </div> </td> <td class="yui-dt-col-_extra" data-column-id="_extra"> <div class="ig-table-cell-inner yui-dt-liner" style="width: 4000px;">&nbsp;</div> </td> </tr> <tr data-record-id="QB.D.FT1345UD.02.IP" class="rec-QB.D.FT1345UD.02.IP"> <td class="yui-dt-col-market" data-column-id="market"> <div class="ig-table-cell-inner yui-dt-liner"><a class="tableIcon dealOpen" igtitle="Status: Market Open#Action: Place new Deal">FTSE to be above 6277.28 at 1:50pm</a> </div> </td> <td class="yui-dt-col-lightbulb" data-column-id="lightbulb"> <div class="ig-table-cell-inner yui-dt-liner"><a class="signal-status" href="#">&nbsp;</a> </div> </td> <td class="yui-dt-col-superNews" data-column-id="superNews"> <div class="ig-table-cell-inner yui-dt-liner"><a class="superNewsIcon off" igtitle="Reuters Info" href="#">&nbsp;</a> </div> </td> <td class="yui-dt-col-news" data-column-id="news"> <div class="ig-table-cell-inner yui-dt-liner"><a class="newsIcon off" href="#">&nbsp;</a> </div> </td> <td class="yui-dt-col-chart" data-column-id="chart"> <div class="ig-table-cell-inner yui-dt-liner"><a class="basicChartIcon on" href="#" igtitle="Chart">&nbsp;</a> </div> </td> <td class="yui-dt-col-menu" data-column-id="menu"> <div class="ig-table-cell-inner yui-dt-liner"><a class="optionsBtn" href="#" igtitle="Click for more options">&nbsp;</a> </div> </td> <td class="yui-dt-col-displayPeriod" data-column-id="displayPeriod"> <div class="ig-table-cell-inner yui-dt-liner" igtitle="">06-JUN-16</div> </td> <td class="yui-dt-col-sell" data-column-id="sell"> <div class="ig-table-cell-inner yui-dt-liner"> <div igtitle="Status: Market Open#Action: Place new Deal" class="dealOpen price priceFlashUp">53.4</div> </div> </td> <td class="yui-dt-col-buy" data-column-id="buy"> <div class="ig-table-cell-inner yui-dt-liner"> <div igtitle="Status: Market Open#Action: Place new Deal" class="dealOpen price priceFlashUp">60.0</div> </div> </td> <td class="yui-dt-col-netChange" data-column-id="netChange"> <div class="ig-table-cell-inner yui-dt-liner blue">0.5</div> </td> <td class="yui-dt-col-percentageChange" data-column-id="percentageChange"> <div class="ig-table-cell-inner yui-dt-liner blue">6277.9</div> </td> <td class="yui-dt-col-updateTime" data-column-id="updateTime"> <div class="ig-table-cell-inner yui-dt-liner"><span>13:45:32</span> </div> </td> <td class="yui-dt-col-high" data-column-id="high"> <div class="ig-table-cell-inner yui-dt-liner"><span>100.0</span> </div> </td> <td class="yui-dt-col-low" data-column-id="low"> <div class="ig-table-cell-inner yui-dt-liner"><span>0.0</span> </div> </td> <td class="yui-dt-col-_extra" data-column-id="_extra"> <div class="ig-table-cell-inner yui-dt-liner" style="width: 4000px;">&nbsp;</div> </td> </tr> <tr data-record-id="QB.D.FT1345UD.03.IP" class="rec-QB.D.FT1345UD.03.IP"> <td class="yui-dt-col-market" data-column-id="market"> <div class="ig-table-cell-inner yui-dt-liner"><a class="tableIcon dealOpen" igtitle="Status: Market Open#Action: Place new Deal">FTSE to be above 6274.28 at 1:50pm</a> </div> </td> <td class="yui-dt-col-lightbulb" data-column-id="lightbulb"> <div class="ig-table-cell-inner yui-dt-liner"><a class="signal-status" href="#">&nbsp;</a> </div> </td> <td class="yui-dt-col-superNews" data-column-id="superNews"> <div class="ig-table-cell-inner yui-dt-liner"><a class="superNewsIcon off" igtitle="Reuters Info" href="#">&nbsp;</a> </div> </td> <td class="yui-dt-col-news" data-column-id="news"> <div class="ig-table-cell-inner yui-dt-liner"><a class="newsIcon off" href="#">&nbsp;</a> </div> </td> <td class="yui-dt-col-chart" data-column-id="chart"> <div class="ig-table-cell-inner yui-dt-liner"><a class="basicChartIcon on" href="#" igtitle="Chart">&nbsp;</a> </div> </td> <td class="yui-dt-col-menu" data-column-id="menu"> <div class="ig-table-cell-inner yui-dt-liner"><a class="optionsBtn" href="#" igtitle="Click for more options">&nbsp;</a> </div> </td> <td class="yui-dt-col-displayPeriod" data-column-id="displayPeriod"> <div class="ig-table-cell-inner yui-dt-liner" igtitle="">06-JUN-16</div> </td> <td class="yui-dt-col-sell" data-column-id="sell"> <div class="ig-table-cell-inner yui-dt-liner"> <div igtitle="Status: Market Open#Action: Place new Deal" class="dealOpen price priceFlashDown">85.6</div> </div> </td> <td class="yui-dt-col-buy" data-column-id="buy"> <div class="ig-table-cell-inner yui-dt-liner"> <div igtitle="Status: Market Open#Action: Place new Deal" class="dealOpen price">90.4</div> </div> </td> <td class="yui-dt-col-netChange" data-column-id="netChange"> <div class="ig-table-cell-inner yui-dt-liner blue">0.5</div> </td> <td class="yui-dt-col-percentageChange" data-column-id="percentageChange"> <div class="ig-table-cell-inner yui-dt-liner blue">6277.9</div> </td> <td class="yui-dt-col-updateTime" data-column-id="updateTime"> <div class="ig-table-cell-inner yui-dt-liner"><span>13:45:32</span> </div> </td> <td class="yui-dt-col-high" data-column-id="high"> <div class="ig-table-cell-inner yui-dt-liner"><span>100.0</span> </div> </td> <td class="yui-dt-col-low" data-column-id="low"> <div class="ig-table-cell-inner yui-dt-liner"><span>0.0</span> </div> </td> <td class="yui-dt-col-_extra" data-column-id="_extra"> <div class="ig-table-cell-inner yui-dt-liner" style="width: 4000px;">&nbsp;</div> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div>