无法从表输出中检索数据

Question

When I try to retrieve using my code below, I get [object HTMLTableElement] I have no idea which part went wrong. 当我尝试使用下面的代码检索时，我得到[object HTMLTableElement]我不知道哪个部分出错了。 I am trying to retrieve the directions as shown above and convert it into arrows instead of text direction keys. 我试图检索如上所示的方向并将其转换为箭头而不是文本方向键。 Thanks for any help. 谢谢你的帮助。

Here is my code: 这是我的代码：

 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>

I have results as shown: 我有如下结果：

Maneuver
undefined
turn-left
turn-left
turn-left
turn-right
turn-right

Answer 1

The problem is you are getting whole table in document.getElementById("Arrows").innerHTML that's why you are getting [object HTMLTableElement] you need to append the table till you reach the element you want to print on label like the below 问题是你在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>

Answer 2

document.getElementById function will return DOM element with the specified id. document.getElementById函数将返回具有指定id的DOM元素。 That's why all you got there is [object HTMLTableElement]. 这就是为什么你到那里的是[对象HTMLTableElement]。

Instead, what you should try to achieve is retrieving the text inside your <td> elements. 相反，您应该尝试实现的是检索<td>元素中的文本。 Since you're using jquery, maybe you should try this instead. 既然你正在使用jquery，也许你应该试试这个。

function getArrows() {
    $('#personDataTable td').each(function(idx, element) { 
        var text = $(element).text();
        $('#Arrows').append(text + ', ');
    });
}

无法从表输出中检索数据

问题描述

2 个解决方案

解决方案1
2

解决方案2
1 已采纳 2018-12-10 05:55:55

无法从表输出中检索数据

问题描述

2 个解决方案

解决方案1 2

解决方案2 1 已采纳 2018-12-10 05:55:55

解决方案1
2

解决方案2
1 已采纳 2018-12-10 05:55:55