我应该怎么做才能在表中的每个ID中循环我的JavaScript代码

Question

I have a table that will show the reserved customers and will countdown the remaining date/time before they arrived. How can i make my javascript loop to get every id's arrival_date and arrival_time?

This is for my capstone thesis, i'm trying to learn ajax to loop it in my php, but i want to know if there's is another way to loop it.

<div class="card mb-3">
    <div class="card-header">
        <i class="fas fa-table"></i>Data Table Example</div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Promo ID</th>
                            <th>Firstname</th>
                            <th>Lastname</th>
                            <th>Contact number</th>
                            <th>Gender</th>
                            <th>Arrival Date</th>
                            <th>Arrival Time</th>
                            <th>Masahista</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tfoot>

                    </tfoot>
                    <tbody>
                    <?php 
                    include'dbcon.php';
                    $user_query=mysql_query("select * from reservation")or 
                    die(mysql_error());
                    while($row=mysql_fetch_array($user_query)){
                    $id=$row['reserve_id']; ?>
                        <tr class="del<?php echo $id ?>">
                            <td>
                                <?php echo $row['reserve_id']; ?>
                            </td>
                            <td>
                                <?php echo $row['promo_code']; ?>
                            </td>
                            <td>
                                <?php echo $row['name']; ?>
                            </td>
                            <td>
                                <?php echo $row['lastname']; ?>
                            </td>
                            <td>
                                <?php echo $row['contact_number']; ?> 
                            </td>
                            <td>
                                <?php echo $row['gender']; ?>
                            </td>
                            <td>
                                <?php echo $row['arrival_date']; ?>
                            </td>
                            <td>
                                <?php echo $row['arrival_time']; ?>
                            </td>
                            <td>
                                <?php echo $row['masahista']; ?>
                            </td>
                            <td>
                                <p id='<?php echo $row[' reserve_id '];?>'></p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

<script>
    // Set the date we're counting down to
    var countDownDate = new Date("<?php echo $row['arrival_date']; ?> <?php 
    echo $row['arrival_time']; ? > ").getTime();
    // Update the count down every 1 second
    var x = setInterval(function() {
    // Get todays date and time
    var now = new Date().getTime();
    // Find the distance between now and the count down date
    var distance = countDownDate - now;
    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 *
    60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    // Output the result in an element with id="demo"
    document.getElementById("<?php echo $row['reserve_id']; ?>").innerHTML =
    days + "d " + hours + "h " +
    minutes + "m " + seconds + "s ";
    // If the count down is over, write some text 
    if (distance < 0) {
    clearInterval(x);
    document.getElementById("<?php echo $row['reserve_id']; ?>").innerHTML =
    "EXPIRED";
    }
    }, 1000);
</script>

I expect the script to loop to every id's to get the value of every id

Answer 1

在php中回显数据的同时，使用info-1，info-2，info-3等循环为每个标签创建不同的ID，并使用javascript或jquery使用循环以相同的方式获取每个标签的文本，以获取所有回显IDS。