- Make <tr> rows clickable and load result in div using jQuery
- <?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>
- $('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);
- }
- });
- });
- $("#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);
- }
- });
- });
- #tblStudents tr:nth-child(even) {
- background: #f1f1f1;
- color: #999;
- }
- $('#tblStudents').on('click', 'tr', function(e) {
- // do something
- ]);
- $('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);
- }
- });