Question

当我尝试使用下面的代码进行检索时，我得到[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

Answer 1

问题是您要在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函数将返回具有指定ID的DOM元素。这就是为什么您只有[object HTMLTableElement]。

相反，您应该尝试实现的是检索<td>元素内的文本。由于您使用的是jquery，也许您应该尝试使用它。

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

无法从表输出中检索数据

2 个答案: