无法从表输出中检索数据
[英]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.