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以下隐藏/删除。

我已经尝试了好几次但是我无法显示，我的代码只显示了第一个。就像

一样

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"的ID（返回所有div，其中class =＆＃34; student＆＃34;），但它应该是当前元素的ID，其中包含被点击了。
你也同时为student和mark元素使用相同的id，所以需要更改mark_id}的mark元素id（见下文）;

'<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

这是新代码。使用＆＃34;这个＆＃34;获取数据的关键字（id）

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

删除所有行，但显示单击指定的id

2 个答案: