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

【问题标题】：Display table row for each user if onclick如果单击，则显示每个用户的表行
【发布时间】：2017-08-01 01:48:26
【问题描述】：

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

我有一个包含用户的表格，当有人点击一行时，一个 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 中？

【问题讨论】：

是的。看看这个答案，如果你需要帮助来实现它，请告诉我。 stackoverflow.com/questions/15229732/…

标签： javascript php html html-table

【解决方案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";
  };
}

【讨论】：

正确声明变量，不要在数组或类似数组的对象上使用for-in。这将访问的不仅仅是匹配的元素，导致它在其他一些情况下失败。
好的，谢谢您的回答。我应该如何在您的 sn-p 中声明“id”？作为 var id=0;并增加它或以其他方式？顺便说一句，我刚刚看到我在问题代码中添加了这个（如果 $i == 1），但它应该显示给每个用户。
@Infiltrator 不需要。只需将 id="student" 替换为 class="student"
尝试了您的解决方案 Jonas，但它不起作用。所以这又是我的表格主体：code // 和其他 4 个 td 的测试文本 code 我只更新了你的脚本部分以显示：table-row 以便它更适合。但是什么都没有出现..

【解决方案2】：

使用更现代语法的 Jonas 解决方案的替代方案可能如下所示：

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

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

所做的更改是：

使用querySelectorAll 获取与.students 选择器匹配的元素。
使用新的for-of 循环迭代学生。
将每个学生设为const，因为无意修改该变量。
在循环外声明处理函数，以便重复使用。
使用addEventListener() 绑定然后处理程序。
使用.nextElementSibling 获取点击后的行。

【讨论】：