How to get elements into the html table

Question

Possible Duplicate:
Trying to use Google Places API with JQuery's getJSON function

I am trying to read the elements into a table.

I am getting the elements into a textfield. Instead I want to show in a table..

Below is the code

   function createMarker(place) {
        //var placeLoc = place.geometry.location;
        var request = {
          reference: place.reference
        };

        service = new google.maps.places.PlacesService(map);
        service.getDetails(request, callback);
        service.getDetails(request, function(details, status) {//alert("address  "+details.formatted_address);

        document.getElementById('box1').value=details.formatted_address;
        document.getElementById('box2').value=details.name;
        document.getElementById('box3').value=details.international_phone_number;

    });

  }
   google.maps.event.addDomListener(window, 'load', initialize);

  </script>
  </head>
  <body>

  <input type="text" id="box1" size="20"/>
  <input type="text" id="box2" size="50"/>
  <input type="text" id="box3" size="20"/>
    <div id="map"></div>
    <div id="text">

</body>
</html>

mplungjan · Accepted Answer · 2012-09-26T11:50:55.170

1

<html>
<head>
<style>
table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}
</style>
<script>
  function createMarker(place) {
    //var placeLoc = place.geometry.location;
     var request = {
     reference: place.reference
    };

    service = new google.maps.places.PlacesService(map);
    service.getDetails(request, function(details, status) {//alert("address  "+details.formatted_address);

      document.getElementById('box1').innerHTML=details.formatted_address;
      document.getElementById('box2').innerHTML=details.name;
      document.getElementById('box3').innerHTML=details.international_phone_number;    
   });

  }
  google.maps.event.addDomListener(window, 'load', initialize);

  </script>
  </head>
  <body>

  <table>
  <tr><td>Address:</td><td id="box1"></td></tr>
  <tr><td>Name:</td><td id="box2"></td>
  <tr><td>Phone:</td><td id="box3"></td>
  </tr>
  </table>

   <div id="map"></div>
   <div id="text">

</body>
</html>

edited Sep 26 '12 at 11:50

answered Sep 26 '12 at 09:20

mplungjan

169,008
28
173
236

document.getElementById('box1').innerHTML=details.formatted_address; document.getElementById('box2').innerHTML=details.name; document.getElementById('box3').innerHTML=details.international_phone_number; }); } google.maps.event.addDomListener(window, 'load', initialize);

– hari86 Sep 26 '12 at 09:26
i did above but table is not getting created – hari86 Sep 26 '12 at 09:27
getting the output but not in table format just showing plain text – hari86 Sep 26 '12 at 09:36
change the table!!! - Look at edit now – mplungjan Sep 26 '12 at 09:36
hi..now iam not getting the output ..how to use this- document.write("");
– hari86 Sep 26 '12 at 09:42
You cannot document.write after load. Please look in the console why my page does not work. Show a page with the input fields working and we can modify that – mplungjan Sep 26 '12 at 09:45
actually it outputs 4 different results(4 addresses)...i want to show eah adress in a table so 4 tables totally – hari86 Sep 26 '12 at 09:49
the output is coming from json ..the table should grow dynamically – hari86 Sep 26 '12 at 09:56
iam really sorry if this is dumb question what iam trying is to show the json output in table formant in html – hari86 Sep 26 '12 at 09:58
see http://stackoverflow.com/questions/11642418/trying-to-use-google-places-api-with-jquerys-getjson-function - read all comments. Then change the document.getElementById("...).innerHTML=... to $("#table").append(''+...+'') – mplungjan Sep 26 '12 at 11:53

How to get elements into the html table

1 Answers1