使用选择折叠引导表

Question

我有一个引导表，我使用 select 从数据库中获取值：

          <table class="table table-hover table-bordered">
    <thead>
      <tr>
      <th>Studentnamn</th>
      <th>Student ID</th>
      <th>Registrerade kurser</th>
      <th>Betyg</th>
      </tr>

    </thead>
    <tbody>
      <?php include 'studentDB.php'; ?>
    </tbody>
  </table>

我想让我的表格折叠，然后显示一个输入表单，其中可以更新 onclicked 行上的值。我使用了以下代码：

    $sql = "SELECT student.studName, grades.studId, grades.courseId, grades.grade FROM student
        INNER JOIN grades ON student.studId=grades.studId";

try {

    foreach ($pdo->query($sql) as $row) {
        echo '<tr data-toggle="collapse" data-target="#collapseUpdate">';
        echo '<td>' . $row['studName'] . '</td>';
        echo '<td>' . $row['studId'] . '</td>';
        echo '<td>' . $row['courseId'] . '</td>';
        echo '<td>' . $row['grade'] . '</td>';
        echo '</tr>';

    echo '<tr>';
        echo '<td colspan="6" class="hiddenRow" id="collapseRow"><div class="accordian-body collapse" id="collapseUpdate">
              <div class="card card-block">
                <form class="form-horizontal" action="update.php" method="post" id="newGrade">

                  <div class="control-group">
                    <label class="control-label">Nytt betyg:</label>
                      <div class="controls">
                        <p><input id="cbetyg" name="grade" type="text"></p>
                        <input type="hidden" name="studId" value="'. $row['studId'] .'">
                        <input type="hidden" name="courseId" value="'. $row['courseId'] .'">
                      </div>
                  </div>

                  <div class="form-actions">
                    <input type="submit" name="submit" value="Ändra">
                  </div>
                </form>

我现在的问题是，只有第一行折叠并且可以使用更新。当我单击其他行时，第一行折叠...有人可以告诉我我能做什么吗？另外，如果我对所有行进行折叠，我的更新是否仍然适用于每一行？

My table looks like this (click here)

谢谢！

Answer 1

您在任何字段中都使用相同的collapseUpdate 目标。尝试修改这些行：

改为

echo '<tr data-toggle="collapse" data-target="#collapseUpdate">';

使用

echo '<tr data-toggle="collapse" data-target="#collapseUpdate'.$row['studId'].'">';

取而代之的是

echo '<td colspan="6" class="hiddenRow" id="collapseRow"><div class="accordian-body collapse" id="collapseUpdate">

使用

echo '<td colspan="6" class="hiddenRow" id="collapseRow"><div class="accordian-body collapse" id="collapseUpdate'.$row['studId'].'">

我怀疑studId 在此表中是唯一的。