1

2 つの質問があります:
1. テーブルの行をクリック可能にするにはどうすればよいajaxContentですか?
2.ロードアニメーションを追加するにはどうすればよいですか<div id='ajaxContent'>

これは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>

これはjfunc.js

$('a.ajaxCall').click(function() {
var rowId = $(this).attr('rel');

 $.ajax({
  type: "get",
  url: '/page/editstudent.php',
  data: { student_id: rowId },
  success: function(data) {
  $('#ajaxContent').html(data);
 }
}); 
});
4

2 に答える 2

2

イベント委任を使用して、テーブルのすべてのクリックをリッスンします。

$("#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ます。これは、データ属性が存在する目的です。<tr>それらをそれ自体に保存することもできます。詳細については、http：//api.jquery.com/data/#data-html5をご覧ください。

于 2012-05-30T14:03:10.227 に答える
0

1a各trにクリックイベントを追加します

$('#tblStudents').on('click', 'tr', function(e) {
     // do something
]);

1bajaxCallでのクリックイベントのバブリングを防止します

$('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で上書きされます

于 2012-05-30T14:02:11.223 に答える