如何将表格内的锚标记链接到 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>

我的问题在于这部分 echo "View Location"; 我不知道让它发挥作用。这里有人知道如何解决这个问题吗？感谢您的帮助！

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 表示“当点击了 ID 为 btnShow 的内容时。”

因此，通过为您的链接提供一个 btnShow 的 ID，您将触发该函数。

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>";

编辑：我想我误解了。如果您尝试根据人员弹出位置，并且没有页面更改窗口，则必须通过 AJAX 执行此操作。

PHP 类似于：

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

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

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

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

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