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

我正在努力解决以下问题

我有一个包含用户的表，当有人单击一行时，一个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中执行此操作？

“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";
  };
}

var students=document.getElementsByClassName（“学生”）；
对于（var id=0；id，Jonas解决方案的另一个替代方案是使用更现代的语法，它可以如下所示：

for(const s of document.querySelectorAll(".students")) {
  s.addEventListener("click", clickHandler);
}

function clickHandler() {
  this.nextElementSibling.style.display = "block";
}

所作的改动包括：


使用
querySelectorAll
获取与
.students
选择器匹配的元素
使用新的

for of循环迭代学员

为每个学生设置一个

常量

，因为无意修改该变量

在循环外部声明处理程序函数，以便可以重用

使用

addEventListener（）

绑定然后处理程序

使用

.nextElementSibling

在单击的行之后获取该行

---

是的。请查看此答案，并告诉我您是否需要帮助实现它。正确声明变量，不要在数组或类似数组的对象上使用

for in

。这将访问不只是匹配的元素，导致在其他情况下失败。好的，谢谢您的回答。我如何在sni中声明“id”ppet？作为var id=0；并以其他方式递增？顺便说一句，我刚刚看到我在我的问题代码中添加了这个（如果$I==1），但它应该为每个用户显示。@渗透者不需要。只需将id=“student”替换为class=“student”Jonas尝试了您的解决方案，但它不起作用。因此，这是我的表体：

code

//和其他4个td的测试文本

code

，我只将脚本的一部分更新为dispay:table row，以便t可能更合适，但什么都没有出现。。