Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Jul 15th, 2012  |  syntax: None  |  size: 2.09 KB  |  hits: 12  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. Make <tr> rows clickable and load result in div using jQuery
  2. <?php
  3.  
  4. echo "<table id='tblStudents'>n";
  5.  
  6.         echo "<thead><tr>n";
  7.             echo "<td>Namn</td>n";
  8.             echo "<td>Personnummer</td>n";
  9.             echo "<td>Startdatum</td>n";
  10.             echo "<td>Slutdatum</td>n";
  11.         echo "</tr></thead>n";
  12.  
  13.         echo "<tbody>n";
  14.         while ($row = mysql_fetch_assoc($list_students)) {
  15.  
  16.             $count = ($count + 1) % 2; //will generate 0 or 1 and is used to alternatve the css classes row0 and row1 in the loop result
  17.  
  18.             echo "<tr class='row$count'>n";
  19.                 echo "<td><a class='ajaxCall' href='#' rel='".$row['student_id']."'>" . $row['student_firstname'] . "</a> " . $row['student_lastname'] . "</td>n";
  20.                 echo "<td>" . $row['student_socialnr'] . "</td>n";
  21.                 echo "<td>" . $row['student_startdate'] . "</td>n";
  22.                 echo "<td>" . $row['student_enddate'] . "</td>n";
  23.  
  24.  
  25.             echo "</tr>n";
  26.         }
  27.         echo "</table>n";  
  28. }
  29.  
  30. ?>
  31. <div id='ajaxContent'></div>
  32.  
  33. <script src="js/jfunc.js"></script>
  34.        
  35. $('a.ajaxCall').click(function() {
  36. var rowId = $(this).attr('rel');
  37.  
  38.  $.ajax({
  39.   type: "get",
  40.   url: '/page/editstudent.php',
  41.   data: { student_id: rowId },
  42.   success: function(data) {
  43.   $('#ajaxContent').html(data);
  44.  }
  45. });
  46. });
  47.        
  48. $("#tblStudents").on("click", "tr", function(e){
  49.     var row_id = $("td:first a.ajaxCall", this).attr("rel");
  50.     $("#ajaxContent").html("Loading...");
  51.     $.ajax({
  52.         url: "/page/editstudent.php",
  53.         data: { 'student_id':row_id },
  54.         success: function(data){
  55.             $("#ajaxContent").html(data);
  56.         }
  57.     });
  58. });
  59.        
  60. #tblStudents tr:nth-child(even) {
  61.     background: #f1f1f1;
  62.     color: #999;
  63. }
  64.        
  65. $('#tblStudents').on('click', 'tr', function(e) {
  66.      // do something
  67. ]);
  68.        
  69. $('a.ajaxCall').click(function(e) {
  70.     e.preventDefault();
  71.     e.stopPropagation();
  72.     var rowId = $(this).attr('rel');
  73.  
  74.     $.ajax({
  75.     type: "get",
  76.     url: '/page/editstudent.php',
  77.     data: { student_id: rowId },
  78.     success: function(data) {
  79.     $('#ajaxContent').html(data);
  80.     }
  81.     });