刪除所有行，但顯示被點擊指定編號

Question

我想顯示結果，當用戶點擊一行然後我會採取此ID並提取相關數據，並顯示在下面。

Student Id Total Marks  Position View 
41   525    1  Marks Sheet 
42   504    2  Marks Sheet 
43   504    2  Marks Sheet 
44   504    2  Marks Sheet 
45   504    2  Marks Sheet 

假設用戶點擊列41，那麼結果將顯示在下面41，在此之後，當用戶點擊42則結果將低於42顯示與先前的結果是在低於41，就可以隱藏/去掉。

我已經試了好幾次，但我無法顯示，我的代碼只顯示first.Like作爲

Student Id Total Marks  Position View 
41   525    1  Marks Sheet 
Your marks sheet of student id:41 
42   504    2  Marks Sheet 
43   504    2  Marks Sheet 
44   504    2  Marks Sheet 
45   504    2  Marks Sheet 

當用戶點擊一行44則

Student Id Total Marks  Position View 
41   525    1  Marks Sheet 
42   504    2  Marks Sheet 
43   504    2  Marks Sheet 
44   504    2  Marks Sheet 
Your marks sheet of student id:44 
45   504    2  Marks Sheet 

我的JS代碼：

$(function(){ 
    $('.student').click(function(){ 
    var sid = this.id; 
    $('.marks').not('#'+sid).remove(); 
    $('.marks').html("Your marks sheet of student id:"+sid);//Next,I will add user clicked studnt marks sheet from database. 
    }); 
    }); 

PHP和HTML代碼：

echo '<tbody>'; 
    foreach($results as $user){ 
     echo '<tr><td>'. $user->stdId.'</td><td>'.$user->total_Marks.'</td><td>'.$user->position.'</td><td class="student" id='.$user->stdId.'>Marks Sheet</td></tr>'; 
    echo '<tr class="marks" id='.$user->stdId.'></tr>'; 
    } 
echo '<tr><tr></tbody>'; 

Answer 1

你得到的div與class="student"（返回所有的div帶class =「學生」）的ID，但它應該是已經被點擊當前元素的id 。
此外，您對學生和標記元素都使用相同的ID，因此需要更改標記元素ID，如marks_ {studentId}（請參見下文）;

'<tr class="marks" id="marks_'.$user->stdId.'"></tr>'; 

，並使用下面的代碼

$(function(){ 
     $('.student').click(function(){ 
     var sid = this.id; 
        ^------^// changed this 
     $('.marks').html('');// remove all mark messages 
     $('#marks_'+sid).html("<td colspan='4'>Yes that is ok."+sid+"</td>"); 
     }); 
    }); 

而且，如果你不希望改變標記元素的id，然後使用下面的代碼，但在這裏紀念行必須是下一行給學生排

$(function(){ 
     $('.student').click(function(){ 
      var sid = $(this).attr('id'); 

     $('.marks').html('')// remove all mark messages 

     $(this).parent().next().html("<td colspan='4'>Yes that is ok."+sid+"</td>"); 

     }); 
    }); 

這裏是工作JSFiddle

Answer 2

這裏是新的代碼。使用「this」關鍵字來獲取數據（ID）

$(function(){ 
    $('tr').click(function(){ 
    var sid = $(this).attr('id'); 
    $('.marks').not('#'+sid).remove(); 
    $('.marks').html("Yes that is ok."+sid); 
    }); 
    });