如何将这些查询结果放入表中

here is the HTML

这是HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Tue, 03 May 2016 17:18:33 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>

    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCqkH9U10wjgseSMBV07LmZETO5VQOT1Lw &callback=initMap"></script>
<body>

<div id="map" style="height:400px"></div>
<div id="status"></div>
<div id="results"</div>
<div id="stdiv"></div>
<div id="midiv"></div>
<div id="myray"></div>

</div>


<div style=" text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;"><table width="40%" border="1" cellpadding="2" cellspacing="2" style="border-color: #000000; border-style: solid; background-color: #ffffff;">
<tr valign="top">
<td id= "state" style="border-color : #000000 #000000 #000000 #000000; border-style: solid;"><br />
</td>
<td id= "mile" style="border-color : #000000 #000000 #000000 #000000; border-style: solid;"><br />
</td>
</tr>
<tr valign="top">
<td id="state" style="border-color : #000000 #000000 #000000 #000000; border-style: solid;"><br />
</td>
<td id="mile" style="border-color : #000000 #000000 #000000 #000000; border-style: solid;"><br />
</td>
</tr>
</table>
</div>

This is part of the Javascript

这是Javascript的一部分

for(state in stateMiles)
{
     //$("#results").append("<br>"+state+":"+stateMiles[state]);            

     $("#stdiv").append("<br>"+stateMiles[state]);
     //query results for number of Miles

     $("#midiv").append("<br>"+state);
}
//query results for 2 letter abbreviation of state 

document.getElementById("stdiv").innerHTML;//this shows the state only on the screen            

document.getElementById("midiv").innerHTML;//this shows the mi. only on the screen

// I used 2 get element to separate the data string. // now just can't figure out how to get it into a table with each in it's own cell

//我使用了2 get元素来分离数据字符串。//现在就是不知道如何把它放到一个表格中，每个表格都在它自己的单元格中

2 个解决方案

#1

I don't know how you have your data set up, but you can do something like this.

我不知道你是如何建立数据的，但是你可以做这样的事情。

window.onload = function() {
    var stateMiles = {Delaware: "16", Florida: "247"};
    var table, tableData;

    // open table tag
    table = "<table>";

    // fill table
    for(state in stateMiles)
    {
        tableData = 
            "<tr><td>" + state + "</td>" + 
            "<td>" + stateMiles[state] + "</td></tr>";
        table = table + tableData;
    }

    // close table tag
    table = table + "</table>";

    // write table into div
    document.getElementById('tabledata').innerHTML = table;
}

<div id="tabledata"></div>

The output in the browser will look like this:

浏览器中的输出如下所示:

<div id="tabledata">
    <table>
        <tr>
            <td>Delaware</td>
            <td>16</td>
        </tr>
        <tr>
            <td>Florida</td>
            <td>247</td>
        </tr>
    </table>
</div>

#2

First I found some errors in your html code . Below is updated code

首先，我在您的html代码中发现了一些错误。下面是更新的代码

<div id="map" style="height:400px"></div>
<div id="status"></div> 
<div id="results"></div>
<div id="stdiv"></div>
<div id="midiv"></div>
<div id="myray"></div>


<div style=" text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;">
   <table width="40%" border="1" cellpadding="2" cellspacing="2" style="border-color: #000000; border-style: solid; background-color: #ffffff;">
      <tr valign="top">
         <td id= "state" style="border-color : #000000 #000000 #000000 #000000; border-style: solid;" class="state1"><br />
         </td>
         <td id= "mile" style="border-color : #000000 #000000 #000000 #000000; border-style: solid;" class="mile1"><br />
         </td>
     </tr>
     <tr valign="top">
         <td id= "state" style="border-color : #000000 #000000 #000000 #000000; border-style: solid;" class="state2"><br />
         </td>
         <td id= "mile" style="border-color : #000000 #000000 #000000 #000000; border-style: solid;" class="mile2"><br />
         </td>
     </tr>
 </table>
</div>

Now the jQuery code will be

现在jQuery代码将是

var txt = "";
var i = 0;
for(state in stateMiles)
{
   i++;
   $("#results").append("<br>"+state+":"+stateMiles[state]);            

   $(".state"+i).append(stateMiles[state]);
   $(".mile"+i).append(state);

}

#1