Question

到目前为止，我已使用下拉菜单中的输入从数据库查询中创建了一个表。现在，我希望用户能够单击该表中的单元格，并使用该单元格的值再次查询数据库以获取更多信息。这就是我所拥有的：

echo "
<tr>
<td>".$value['Time']."</td>
<td><a href='#'><div value=".$value['First_Name'].">".$value['First_Name']."</div></a></td>
...

这将继续其余的信息，但那是我的初始表的代码。然后，用户应单击First_Name以获取AJAX请求提供的进一步信息。到目前为止，我的jQuery看起来像这样......我甚至无法启动AJAX，因为我无法传递表格单元格的值。

$(document).ready(function(){
    $('#tables').on('click','td', function(){
            var module= $(this).val();
            alert(module);
        })

一旦我弄清楚如何传递这个值，那么我可以继续进行数据库查询，但这让我筋疲力尽。如果我使用JQuery AJAX，我甚至需要这样做吗？任何帮助表示赞赏。

Answer 1

如果你想获得元素标签内的文字。请使用.text()而不是.val() 例如：

var module= $(this).text();

我希望这有用：）

Answer 2

最好在<a>而不是<td>上绑定点击事件。那也行得很好。

现在问题是你想通过 AJAX 传递一些价值到 PHP 脚本。这样做的好方法是将data-*属性设置为<a>元素。

所以你的 HTML / PHP 代码看起来像这样，

<td>".$value['Time']."</td>
<td><a href='#' class='myLink' data-modelvalue='".$value['First_Name']."'><div value=".$value['First_Name'].">".$value['First_Name']."</div></a></td>

在上面的代码中，我们为<a>提供了一个类来绑定具有此类的每个元素的click事件。（对于使用循环生成的多个记录很有用），我们还将 data-modelvalue 属性设置为<a>。

现在更新你的jQuery代码，

$('#tables').on('click','.myLink', function(e){
     e.preventDefault();
     var module= $(this).data('modelvalue');
     alert(module);
});

在上面的代码中，我们在 myLink 类元素上绑定了click事件。我们还使用.data() jQuery方法获取 data-modelvalue 。

e.preventDefault（）强制不触发事件的默认操作，在我们的案例中，页面不会刷新（这是任何超链接的默认操作）。

<强>参考文献：

https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes
https://api.jquery.com/data/
https://api.jquery.com/event.preventdefault/

如何使用JQuery将动态创建的表中的值传递给新的数据库查询？

2 个答案: