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

Question

I have a button where I can create a task, the task details get inserted into my database and then I call that database to display the rows on my page. I currently am able to click on a row but only the details of the last row is shown. I ultimately would like to click on a row and then open the modal with all the contents populated.

I have tried the following:

-Tried to move php array into a javascript array and then call the array to try and populate my modal depending on what row is clicked. - Tried to follow this idea Modal Button on each row displays modal which fetch details from database but seems like that would only work if I used a button. -I tried moving the end of the while loop bracket because I thought that the second while loop should be nested in the other but that came with worse results.

  <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>

I expected each row to display its own content on click.

Answer 1

One way is to make a modal for each record. For doing so, put your modal code in the loop and make the id of modal dynamic. This way is only advisable if number of records are limited.

Refer this :

    <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');