单击表格行时打开信息窗口 [英] Opening Info Window when clicking a table row

问题描述

我试图从MySQL表中加载多个城市的id，名称和位置，然后将其填充到HTML表格中。

我想要一个信息窗口在城市标记上弹出，当用户点击一行HTML标签时（tr标签）。我使用的PHP，Javascript和XML没有任何jQuery。

我的HTML：

 <？php 
 $ query =SELECT ID，name，lat，lng FROM city ORDER BY id; 
 $ arrCities = mysql_query（$ query）; 
？> 
 
< div id =gmapstyle =width：550px; height：450px>< / div> 
 
< table id =tblData> 
< tr> 
< th> ID< / th> 
 City< / th> 
< / tr> 
 
 <？php while（$ row = mysql_fetch_assoc（$ arrCities））{？> 
 
< tr id =<？php echo $ row ['id'];？>> 
 
< td><？php echo $ row ['id']; ？>< / TD> 
< td><？php echo $ row ['name']; ？>< / TD> 
 
< / tr> 
<？php}？> 
< / table> 
  

我的PHP用于创建XML来填充标记（my-xml-generator.php）：

 <？php 
 $ query =SELECT ID，name，lat，lng FROM city ORDER BY id; 
 $ arrCities = mysql_query（$ query）; 
 
 $ dom = new DOMDocument（'1.0'，'utf-8'）; 
 $ node = $ dom-> createElement（'markers'）; 
 $ parNode = $ dom-> appendChild（$ node）; 
 
 header（'Content-type：text / xml'）; 
 
 while（$ row = mysql_fetch_assoc（$ arrCities））
 {
 $ node = $ dom-> createElement（'marker'）; 
 $ newNode = $ parNode-> appendChild（$ node）; 
 $ newNode-> setAttribute（'id'，$ row ['id']）; 
 $ newNode-> setAttribute（'name'，$ row ['name']）; 
 $ newNode-> setAttribute（'lat'，$ row ['lat']）; 
 $ newNode-> setAttribute（'lng'，$ row ['lng']）; 
} 
 
 echo $ dom-> saveXML（）; 
？> 
  

我的Javascript：

  var gmap = new google.maps.Map（mapDiv，options）; 
 
 var arrMarkers = []; 
 var infoWindow = new google.maps.InfoWindow; 
 
 //将标记添加到地图
 DownloadUrl（my-xml-generator.php，函数（数据）
 {
 var xml = data.responseXML ; 
 var markers = xml.documentElement.getElementsByTagName（marker）; 
 
 for（var i = 0; i< markers.length; i ++）
 {
 var id = markers [i] .getAttribute（id）; 
 
 var lat = parseFloat（markers [i] .getAttribute（lat））; 
 var lng = parseFloat（markers [i] .getAttribute（lng））; 
 var pos = new google.maps.LatLng（lat，lng）; 
 
 
 var markerOptions = 
 {
 position：pos，
 map：gmap，
 draggable：false 
}; 
 
 //添加记号
 var marker = new google.maps.Marker（markerOptions）; 
 arrMarkers.push（marker）; 
 
 //这段代码不工作ng 
 var tr = document.getElementById（id）; 
 google.maps.event.addDomListener（tr，click，function（）{RowClick（i）;}）; 
 
 
 //添加信息窗口
 var html ='< div>'+ id +'< / div>'; 
 
 BindInfoWindow（marker，gmap，infoWindow，html）; 
} 
}）; 
 
 
函数BindInfoWindow（marker，map，infoWindow，html）
 {
 google.maps.event.addListener（marker，click，function（）
 {
 infoWindow.setContent（html）; 
 infoWindow.open（map，marker）; 
}）; 
 
 
 
函数RowClick（i）
 {
 google.maps.event.trigger（arrMarkers [i]，click）; 
 
 
 
函数DownloadUrl（url，callback）
 {
 var xhr = new XMLHttpRequest（）; 
 
 xhr.onreadystatechange = function（）
 {
 if（xhr.readyState == 4）
 {
 xhr.onreadystatechange = DoNothing; 
 callback（xhr，xhr.status）; 
} 
}; 
 
 xhr.open（'GET'，url，true）; 
 xhr.send（null）; 
 
 
函数DoNothing（）{} 
  

这是不工作的是这部分在JavaScript上面：

  var tr = document.getElementById（id）; 
 google.maps.event.addDomListener（tr，click，function（）{RowClick（i）;}）; 
  

执行此操作的正确方法是什么？

其他信息：
如果我将javascript改为这样：

  var tr = document.getElementById （ID）; 
 google.maps.event.addDomListener（tr，click，function（）{alert（tr.id）;}）; 
  

然后当我点击该行时弹出警告框，但显示的ID始终为最后一行的ID不管我点击了哪一行。
谢谢

解决方案

该函数需要回调，但为了保存变量状态，您将必须它是一个关闭。：

我认为这应该起作用。

  google.maps.event.addDomListener（tr，click，
（function（i）{
 var row = i; 
 return function（）{
 RowClick（row）; 
} 
}）（i）
）; 
  

I'm trying to load several cities' id, name, and positions from a MySQL table and then populate it into an HTML table. There's also a Google Maps with markers pointing to those cities.

I want an info window to pop up on the city marker when user click one of the HTML row (tr tag). I'm using PHP, Javascript, and XML without any jQuery.

My HTML:

<?php
   $query = "SELECT id, name, lat, lng FROM city ORDER BY id";
   $arrCities = mysql_query ($query);
?>

<div id="gmap" style="width: 550px; height: 450px"></div>

<table id="tblData">
   <tr>
       <th>ID</th>
       <th>City</th>
   </tr>

   <?php while ($row = mysql_fetch_assoc($arrCities)) { ?>

       <tr id="<?php echo $row['id']; ?>">

           <td><?php echo $row['id']; ?></td>
           <td><?php echo $row['name']; ?></td>

       </tr>
   <?php } ?>
</table>

My PHP for creating an XML to populate the markers (my-xml-generator.php):

<?php
    $query = "SELECT id, name, lat, lng FROM city ORDER BY id";
    $arrCities = mysql_query ($query);

    $dom = new DOMDocument('1.0', 'utf-8');
    $node = $dom->createElement ('markers');
    $parNode = $dom->appendChild ($node);

    header('Content-type: text/xml');

    while ($row = mysql_fetch_assoc($arrCities))
    {
            $node = $dom->createElement ('marker');
            $newNode = $parNode->appendChild ($node);
            $newNode->setAttribute ('id', $row['id']);
            $newNode->setAttribute ('name', $row['name']);
            $newNode->setAttribute ('lat', $row['lat']);
            $newNode->setAttribute ('lng', $row['lng']);
    }

    echo $dom->saveXML();
?>

My Javascript:

    var gmap = new google.maps.Map (mapDiv, options);

    var arrMarkers = []; 
    var infoWindow = new google.maps.InfoWindow;

    // add markers to the map
    DownloadUrl ("my-xml-generator.php", function(data)
    {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName ("marker");

        for (var i = 0; i < markers.length; i++)
        {
            var id = markers[i].getAttribute("id");

            var lat = parseFloat (markers[i].getAttribute("lat"));
            var lng = parseFloat (markers[i].getAttribute("lng"));
            var pos = new google.maps.LatLng (lat, lng);


            var markerOptions =
            {
                position    : pos,
                map         : gmap,
                draggable   : false
            };

            // add the marker
            var marker = new google.maps.Marker (markerOptions);
            arrMarkers.push(marker);

            // this part of code is not working
            var tr = document.getElementById(id);
            google.maps.event.addDomListener (tr, "click",  function() { RowClick(i); });


            // add info window
            var html = '<div>' + id + '</div>';

            BindInfoWindow (marker, gmap, infoWindow, html);
        }
    });


    function BindInfoWindow (marker, map, infoWindow, html)
    {
        google.maps.event.addListener (marker, "click", function()
        {
            infoWindow.setContent (html);
            infoWindow.open (map, marker);
        });
    }


    function RowClick (i)
    {
        google.maps.event.trigger (arrMarkers[i], "click");
    }


    function DownloadUrl (url, callback)
    {
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function()
        {
            if (xhr.readyState == 4)
            {
                xhr.onreadystatechange = DoNothing;
                callback(xhr, xhr.status);
            }
        };

        xhr.open ('GET', url, true);
        xhr.send (null);
    }

    function DoNothing() {}

The part that isn't working is this part in the javascript above:

var tr = document.getElementById(id);
google.maps.event.addDomListener (tr, "click", function() { RowClick(i); });

What is the right way to do this?

Additional info: If I changed my javascript to be like this:

var tr = document.getElementById(id);
google.maps.event.addDomListener (tr, "click", function() { alert(tr.id); });

Then the alert boxes will pop up when I click the row, but the ID shown will always be the last row's ID no matter which row I clicked. Thanks

解决方案

the function takes a callback, but to save your variable state you're going to have to make it a closure.:

I think this should work.

google.maps.event.addDomListener (tr, "click", 
(function(i){
    var row = i;
    return function(){
    RowClick(row);
    }
 })(i)
);

这篇关于单击表格行时打开信息窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！