無法從表輸出中檢索數據
[英]cannot retrieve data from table output
問題描述
當我嘗試使用下面的代碼檢索時，我得到[object HTMLTableElement]我不知道哪個部分出錯了。 我試圖檢索如上所示的方向並將其轉換為箭頭而不是文本方向鍵。 謝謝你的幫助。
這是我的代碼：
function getManeuver() { var url = "https://maps.googleapis.com/maps/api/directions/json?origin=place_id:ChIJ685WIFYViEgRHlHvBbiD5nE&destination=place_id:ChIJA01I-8YVhkgRGJb0fW4UX7Y&key=YOUR_API_KEY"; $.ajax({ type: "GET", url: url, dataType: "json", success: function (data) { console.log('success', data); drawTable(data); } }); function drawTable(data) { for (var i = 0; i < data.routes[0].legs[0].steps.length; i++) { drawRow(data.routes[0].legs[0].steps[i]); } } function drawRow(steps) { var row = $("<tr />") $("#personDataTable").append(row); row.append($("<td>" + steps.maneuver + "</td>")); } } function getArrows() { var myTab = document.getElementById('personDataTable'); document.getElementById("Arrows").innerHTML = myTab; }
<!DOCTYPE html> <html> <head> <title>Get Code</title> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="js/table2.js"></script> <link rel="stylesheet" href="css/table.css"> </head> <body> <button onclick="getManeuver()">Get Maneuver</button> <table id="personDataTable"> <tr> <th>Maneuver</th> </tr> </table> <button onclick="getArrows()">Get Arrows</button> <p id="Arrows"></p> </body> </html>
我有如下結果：
Maneuver
undefined
turn-left
turn-left
turn-left
turn-right
turn-right
2 個解決方案
解決方案1
2
問題是你在document.getElementById("Arrows").innerHTML中得到整個表document.getElementById("Arrows").innerHTML這就是為什么你得到[object HTMLTableElement]你需要附加表，直到你到達你想在標簽上打印的元素，如下所示
var myTab = document.getElementById('personDataTable'); document.getElementById("Arrows").innerHTML = myTab; console.log(myTab); console.log(document.getElementById('personDataTable').children[0].children[0].children[0].innerText);//the output of this will be "Maneuver" console.log(document.getElementById('personDataTable').children[0].children[0].children.length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <button onclick="getManeuver()">Get Maneuver</button> <table id="personDataTable"> <tr> <th>Maneuver</th> </tr> </table> <button onclick="getArrows()">Get Arrows</button> <p id="Arrows"></p>
解決方案2
1 已采納 2018-12-10 05:55:55
document.getElementById函數將返回具有指定id的DOM元素。 這就是為什么你到那里的是[對象HTMLTableElement]。
相反，您應該嘗試實現的是檢索<td>元素中的文本。 既然你正在使用jquery，也許你應該試試這個。
function getArrows() {
$('#personDataTable td').each(function(idx, element) {
var text = $(element).text();
$('#Arrows').append(text + ', ');
});
}
無法從具有 Node.js 的 MySQL 表中正確檢索數據
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.