Php 制造<;tr>;使用jQuery在div中单击并加载结果的行
我有两个问题:Php 制造<;tr>;使用jQuery在div中单击并加载结果的行,php,jquery,ajax,Php,Jquery,Ajax,我有两个问题:1。如何使我的表行可以单击,并且仍然在divajaxContent中加载ajax内容2。如何在 这是students.php <?php echo "<table id='tblStudents'>\n"; echo "<thead><tr>\n"; echo "<td>Namn</td>\n"; echo "<td>Personnumm
1。如何使我的表行可以单击,并且仍然在div
ajaxContent
中加载ajax内容2。如何在
这是students.php
<?php
echo "<table id='tblStudents'>\n";
echo "<thead><tr>\n";
echo "<td>Namn</td>\n";
echo "<td>Personnummer</td>\n";
echo "<td>Startdatum</td>\n";
echo "<td>Slutdatum</td>\n";
echo "</tr></thead>\n";
echo "<tbody>\n";
while ($row = mysql_fetch_assoc($list_students)) {
$count = ($count + 1) % 2; //will generate 0 or 1 and is used to alternatve the css classes row0 and row1 in the loop result
echo "<tr class='row$count'>\n";
echo "<td><a class='ajaxCall' href='#' rel='".$row['student_id']."'>" . $row['student_firstname'] . "</a> " . $row['student_lastname'] . "</td>\n";
echo "<td>" . $row['student_socialnr'] . "</td>\n";
echo "<td>" . $row['student_startdate'] . "</td>\n";
echo "<td>" . $row['student_enddate'] . "</td>\n";
echo "</tr>\n";
}
echo "</table>\n";
}
?>
<div id='ajaxContent'></div>
<script src="js/jfunc.js"></script>
1在每个tr上添加一个单击事件
$('#tblStudents').on('click', 'tr', function(e) {
// do something
]);
1 b防止ajaxCall上的click事件嗡嗡响
$('a.ajaxCall').click(function(e) {
e.preventDefault();
e.stopPropagation();
var rowId = $(this).attr('rel');
$.ajax({
type: "get",
url: '/page/editstudent.php',
data: { student_id: rowId },
success: function(data) {
$('#ajaxContent').html(data);
}
});
2在请求ajax url之前,将图像插入ajaxContent。请求完成后,图像将被新的html覆盖使用事件委派并侦听表上的所有单击
$("#tblStudents").on("click", "tr", function(e){
var row_id = $("td:first a.ajaxCall", this).attr("rel");
$("#ajaxContent").html("Loading...");
$.ajax({
url: "/page/editstudent.php",
data: { 'student_id':row_id },
success: function(data){
$("#ajaxContent").html(data);
}
});
});
附带问题
您不需要向每个表行添加0
或1
的类名。使用纯CSS,您可以针对偶数行和奇数行设置不同的样式:
#tblStudents tr:nth-child(even) {
background: #f1f1f1;
color: #999;
}
此外,我鼓励您将学生id存储在数据属性上,而不是
rel
属性上。这就是数据属性存在的目的。您甚至可以将它们存储在
本身上。有关这些内容的更多信息,请发到。发布您的HTML,而不是PHP。另外,您希望
可单击,还是希望
位于第一个
中?我认为您还需要查看PHP,因为$count函数。如果我对jQuery了解得没错,我想这会成为阻碍。。并不是说我很擅长,但仍然如此。我想要完整的可点击的。交替类将在生成的HTML中看到。此外,它与这个特定的问题并不相关。虽然这与这个问题无关,但请将Namn
更改为Namn
,并对Personnummer、Startdatum和Slutdatum执行相同的操作。这将使表格更易于访问,并提供更多symantec。感谢您提供的信息。感谢您的回复。但是我不能让它工作。当我单击一行,firebug在属性列表成功后显示“missing}:function(data){”时,不会发生任何事情。你介意进一步帮助我吗?@David抱歉,我遗漏了一个逗号。另外请注意,你需要单击
标记。如果你想通过单击
上的任何位置来实现这一点,我们可以进行这些更改。现在它工作得更好了,谢谢。是的,我非常喜欢这个功能!@David我已经更新了代码来处理点击t他是
标签。请注意,这仍然取决于
获取学生id。
#tblStudents tr:nth-child(even) {
background: #f1f1f1;
color: #999;
}