我有一个可点击的行可以打开一个模态，我希望用该行的内容填充模态

Question

我有一个按钮，我可以在其中创建一个任务，任务详细信息入到我的数据库中，然后我调用该数据库来显示页面上的行。我目前可以单击一行，但仅显示最后一行的详细信息。我最终想单击一行，然后打开填充所有内容的模式。

我尝试了以下方法：

- 尝试将 php 数组移动到 javascript 数组中，然后调用该数组以尝试根据单击的行填充我的模式。- 试图遵循这个想法 每行上的模态按钮显示模态，从数据库中获取详细信息但似乎只有当我使用按钮时才有效。-我尝试移动 while 循环括号的末尾，因为我认为第二个 while 循环应该嵌套在另一个循环中，但这会带来更糟糕的结果。

  <table class="taskTable" >
 <tbody class="task-tbody">
            <?php while($row1 = mysqli_fetch_array($Table)){ $task123=$row1[2];  ?>
            <tr class = "task-tr"  onclick="document.getElementById('viewTask').style.display='block'">
                <td class="task-td"><input type="checkbox" name="select" value="select"></td>
                <td class="task-td"> <?php if ($row1[0]=='backlog') {$statuscss= 'statusBacklog';} elseif ($row1[0]== 'inprogress') {$statuscss= 'statusInProgress';} else{ $statuscss= 'statusDone';}    echo '<div class="',$statuscss,'">';?><?php echo $row1[0];?></div></td>
                <td class="task-td"> <?php if ($row1[1]=='HIGH') {$statuscss= 'priorityHigh';} elseif ($row1[1]== 'MEDIUM') {$statuscss= 'priorityMedium ';} else{ $statuscss= 'priorityLow';}    echo '<div class="',$statuscss,'">';?>  <?php echo $row1[1];?></div></td>
                <td class="task-td"> <?php echo $task123;?></td>
                <td class="task-description"> <?php echo $row1[3];?></td>
                <td class="task-td"> <?php echo $row1[4];?></td>
                <td class="task-td"> <?php echo $row1[5];?></td>
                <td class="task-td" width="15"> </td>
            </tr>
<?php }?>
    </tbody>
        </table>
        <br><br>
     <div id="viewTask" class="modal" style="display: none;">
        <div class="taskOpenContent">
<?php 
                    $modal123 = "select Tasknumber,Priority,Description,Duedate,Title, Status1 from Universe.Task where Tasknumber=$task123;";
                    $modalqry = mysqli_query($link, $modal123);
                    while ($row = mysqli_fetch_array($modalqry))
                        {
                            $Tasknumber_modal=$row[0];
                            $Priority_modal=$row[1];
                            $Description_modal=$row[2];
                            $Duedate_modal=$row[3];
                            $Title_modal=$row[4];   
                            $status_modal=$row[5];
                        ?>

          <div id="editTask">
            <table class="taskTableOpen">
            <tbody class="task-tbodyOpen">
            <tr class="task-tr">
            <td class="task-td"  id="backlogp">  <?php if ($status_modal=='backlog') {$statuscss= 'statusBacklog';} elseif ($status_modal== 'inprogress') {$statuscss= 'statusInProgress';} else{ $statuscss= 'statusDone';}    echo '<div class="',$statuscss,'">';?><?php echo $status_modal?></td>
            <td class="task-td"><?php if ($Priority_modal=='HIGH') {$statuscss= 'priorityHigh';} elseif ($Priority_modal== 'MEDIUM') {$statuscss= 'priorityMedium ';} else{ $statuscss= 'priorityLow';}    echo '<div class="',$statuscss,'">';?>  <?php echo $Priority_modal;?></div></td>
            <td class="task-td"></td>
            <td class="task-td"><?php echo $Duedate_modal?></td>
            <td class="task-td"><i class="fas fa-user-circle"></i></td>
          </tr>
            </tbody>
            </table>
            <h1 id="title" value="swag"><?php echo $Title_modal?> </h1>
            <p id="content" class="taskDescOpen"></p><?php echo $Description_modal;?></div>
        <button type="button" id="editBtn" class="taskEdit">Edit <i class="far fa-edit"></i></button>
        <p></p>
          <div class="containerComment">
             <textarea placeholder="Comment..." class="taskComment"/></textarea>
          </div>

          <div class="clearfix">
            <button type="reset" onclick="document.getElementById('viewTask').style.display='none'" class="closebtn">Close</button>
          </div>

<?php }?>

        </div>
        </div>
        <script>
    var modal = document.getElementById('viewTask');
$(document).ready(function() {
    $('#table tr').click(function() {
        var href = $(this).find("a").attr("href");
        if(href) {
            window.location = href;
        }
    });
});
</script>

我希望每一行在单击时都显示自己的内容。

Answer 1

一种方法是为每条记录创建一个模态。为此，请将模态代码放入循环中，并使模态动态 id。仅当记录数有限时，才建议使用此方法。

参考这个 ：

    <table class="taskTable" >
    <tbody class="task-tbody">
            <?php while($row1 = mysqli_fetch_array($Table)){ $task123=$row1[2];  ?>
            <tr class = "task-tr"  onclick="document.getElementById('viewTask<?php echo $task123?>').style.display='block'">
                <td class="task-td"><input type="checkbox" name="select" value="select"></td>
                <td class="task-td"> <?php if ($row1[0]=='backlog') {$statuscss= 'statusBacklog';} elseif ($row1[0]== 'inprogress') {$statuscss= 'statusInProgress';} else{ $statuscss= 'statusDone';}    echo '<div class="',$statuscss,'">';?><?php echo $row1[0];?></div></td>
                <td class="task-td"> <?php if ($row1[1]=='HIGH') {$statuscss= 'priorityHigh';} elseif ($row1[1]== 'MEDIUM') {$statuscss= 'priorityMedium ';} else{ $statuscss= 'priorityLow';}    echo '<div class="',$statuscss,'">';?>  <?php echo $row1[1];?></div></td>
                <td class="task-td"> <?php echo $task123;?></td>
                <td class="task-description"> <?php echo $row1[3];?></td>
                <td class="task-td"> <?php echo $row1[4];?></td>
                <td class="task-td"> <?php echo $row1[5];?></td>
                <td class="task-td" width="15"> </td>
            </tr>
<?php }?>
    </tbody>
        </table>
        <br><br>
     <?php while($row1 = mysqli_fetch_array($Table)){ $task123=$row1[2];  ?>
     <div id="viewTask<?php echo $task123; ?>" class="modal" style="display: none;">
        <div class="taskOpenContent">
            <?php 
                $modal123 = "select Tasknumber,Priority,Description,Duedate,Title, Status1 from Universe.Task where Tasknumber=$task123;";
                $modalqry = mysqli_query($link, $modal123);
                while ($row = mysqli_fetch_array($modalqry))
                {
                    $Tasknumber_modal=$row[0];
                    $Priority_modal=$row[1];
                    $Description_modal=$row[2];
                    $Duedate_modal=$row[3];
                    $Title_modal=$row[4];   
                    $status_modal=$row[5];
                ?>
                <div id="editTask">
                    <table class="taskTableOpen">
                    <tbody class="task-tbodyOpen">
                    <tr class="task-tr">
                    <td class="task-td"  id="backlogp">  <?php if ($status_modal=='backlog') {$statuscss= 'statusBacklog';} elseif ($status_modal== 'inprogress') {$statuscss= 'statusInProgress';} else{ $statuscss= 'statusDone';}    echo '<div class="',$statuscss,'">';?><?php echo $status_modal?></td>
                    <td class="task-td"><?php if ($Priority_modal=='HIGH') {$statuscss= 'priorityHigh';} elseif ($Priority_modal== 'MEDIUM') {$statuscss= 'priorityMedium ';} else{ $statuscss= 'priorityLow';}    echo '<div class="',$statuscss,'">';?>  <?php echo $Priority_modal;?></div></td>
                    <td class="task-td"></td>
                    <td class="task-td"><?php echo $Duedate_modal?></td>
                    <td class="task-td"><i class="fas fa-user-circle"></i></td>
                    </tr>
                    </tbody>
                    </table>
                    <h1 id="title" value="swag"><?php echo $Title_modal?> </h1>
                    <p id="content" class="taskDescOpen"></p><?php echo $Description_modal;?></div>
                    <button type="button" id="editBtn" class="taskEdit">Edit <i class="far fa-edit"></i></button>
                    <p></p>
                    <div class="containerComment">
                        <textarea placeholder="Comment..." class="taskComment"/></textarea>
                    </div>
                    <div class="clearfix">
                        <button type="reset" onclick="document.getElementById('viewTask').style.display='none'" class="closebtn">Close</button>
                    </div>
                    <?php }?>
        </div>
        </div>
        <?php } ?>
        <script>
    var modal = document.getElementById('viewTask');