如何将表内的锚标记链接到js函数？

Question

嗨：）我需要一些帮助。 我仅通过单击表内的“查看位置”按钮就无法显示模态时遇到问题。 一旦我点击它，模态就会显示出来，但是我做不到。 这是我的代码：

echo "<td><a href='');\">View Location</a></td>";
echo "<td><a href='editPeople.php?id=".$query2['ID']."');\">Edit</a></td>";
echo "<td><a href='deletePeople.php?id=".$query2['ID']."' onClick=\"javascript:return confirm('Are you sure you want to delete this record?');\">Delete</a></td><tr>";

这是我的js来自免费资源：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function ic() {
$("#btnShow").click(function ic() {
    $("#dialog").dialog({
        modal: true,
        title: "Google Map",
        width: 600,
        hright: 450,
        buttons: {
            Close: function ic() {
                $(this).dialog('close');
            }
        },
        open: function ic() {
            var mapOptions = {
                center: new google.maps.LatLng(14.8527393, 120.8160376),
                zoom: 18,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map($("#dvMap")[0], mapOptions);
        }
    });
});
});
</script>

我的问题是在这部分回显“查看位置”； 我不知道要使其功能正常。 这里有人知道如何解决这个问题吗？ 感谢您的帮助！

Answer 1

如果您使用的是PHP，请尝试以下操作：

echo "<td><button id="btnShow">View Location</button></td>";
echo "<td><a href='editPeople.php?id=".$query2['ID']."');\">Edit</a></td>";
echo "<td><a href='deletePeople.php?id=".$query2['ID']."' onClick=\"javascript:return confirm('Are you sure you want to delete this record?');\">Delete</a></td><tr>";


<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#btnShow").click(function ic() {
    $("#dialog").dialog({
        modal: true,
        title: "Google Map",
        width: 600,
        hright: 450,
        buttons: {
            Close: function ic() {
                $(this).dialog('close');
            }
        },
        open: function ic() {
            var mapOptions = {
                center: new google.maps.LatLng(14.8527393, 120.8160376),
                zoom: 18,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map($("#dvMap")[0], mapOptions);
        }
    });
});
});
</script>

Answer 2

jQuery语法$("#btnShow").click说“当$("#btnShow").click ID为btnShow的内容时”。

因此，通过给您的链接ID为btnShow，您将触发该函数。

echo "<td><a href='' id='btnShow'>View Location</a></td>";
echo "<td><a href='editPeople.php?id=".$query2['ID']."');\">Edit</a></td>";
echo "<td><a href='deletePeople.php?id=".$query2['ID']."' onClick=\"javascript:return confirm('Are you sure you want to delete this record?');\">Delete</a></td><tr>";

如果希望按钮具有手形光标，则可能需要echo "<td><a style='cursor: pointer;' href='' id='btnShow'>View Location</a></td>"; echo "<td><a style='cursor: pointer;' href='' id='btnShow'>View Location</a></td>";

编辑：我想我误会了。 如果您要基于人员弹出一个位置，并且没有页面更改窗口，则必须通过AJAX进行。

PHP将类似于：

echo "<td><a href='' onclick='btnShow(".$query2['ID'].")'>View Location</a></td>";

基本上，上面的代码现在要做的是调用一个您必须创建的名为“ btnShow（ID）”的jquery函数。 此函数将对PHP页面进行AJAX调用，该PHP页面根据您传递的ID从服务器获取纬度和经度。 成功后，它将调用您的“免费来源”公式，将纬度和经度替换为从AJAX调用中获取的值。

我意识到这听起来令人生畏，但是jQuery使AJAX调用比听起来容易得多。 我希望我现在有更多时间为您键入一个函数，但是我没有。 我希望这至少能使您朝正确的方向前进！

编辑2：明确地说，您现在正在调用的函数-免费源-具有设定的纬度和经度。 无论您单击什么“查看位置”按钮，它都将始终显示相同的位置。 如果您尝试这样做，那么我可以给您一个简单的脚本。

但是，如果您尝试根据人物来更改位置，则可以更深入地了解，并且可以使用我在原始编辑中概述的方法来实现。