javascript - 如果单击，则显示每个用户的表行

Question

我正在努力解决以下问题。

我有一个包含用户的表格，当有人点击一行时，一个 div 应该显示在被点击的行的正下方并显示信息。首先，我正在构建表格:

<table id="table" class="table">
        <thead>
            //......
        </thead>
        <tbody>
        <?php $i = 1; foreach ($fetchStudenten as $student){ ?>
            <tr id="student">
                <td><?php echo $i ?></td>
                <td><?php echo $user['student_name'] ?></td>
                <td><?php echo $user['student_email'] ?></td>
                <td><?php echo $user['student_id'] ?></td>
            </tr>
            <?php if($i == 1){?><tr id="info" colspan="4" style="display: none" class="alert alert-info"><td colspan="4">Display here more info</td></tr><?php } ?>
            <?php $i++; } ?>
        </tbody>
    </table>

如您所见，我在表中为每个用户输入了值。我已经尝试了一些(纯!)JS 脚本，但我没有让它工作。是否有任何选项可以仅在 js 而不是 jQuery 中执行此操作？

Answer 1

"student"应该是一个类(id 是唯一的)，你可以这样做:

var students=document.getElementsByClassName("students");
for(var id=0;id<students.length;id++){
  students[id].onclick=function(){
     this.parentNode.rows[ this.rowIndex + 1 ].style.display="block";
  };
}