到目前为止,我已使用下拉菜单中的输入从数据库查询中创建了一个表。现在,我希望用户能够单击该表中的单元格,并使用该单元格的值再次查询数据库以获取更多信息。这就是我所拥有的:
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,我甚至需要这样做吗?任何帮助表示赞赏。
答案 0 :(得分:1)
如果你想获得元素标签内的文字。请使用.text()
而不是.val()
例如:
var module= $(this).text();
我希望这有用:)
答案 1 :(得分:0)
最好在<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/