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

“学生”应该是一个班级（ids是唯一的），而不是你能做到的：

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

Answer 2

Jonas＆＃39;的另一种选择。使用更现代语法的解决方案可能如下所示：

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获取单击后的行。

如果点击

2 个答案: