在PHP中第一次循环后，Javascript函数停止

Question

我有一些javascript，它在表的每一行上创建一个日期时间选择器。 该功能仅适用于第一行。 我理解这是因为datepicker在每一行都共享相同的ID。 如何调整我的代码来解决这个问题？

<script type="text/javascript">
$(document).ready(function (){
$('#duedate').datetimepicker({
controlType: 'select',
timeFormat: 'hh:mm tt'
});
});
</script>

<?php $txtJob = $_GET['pickjob']; ?>

<?php
$query2 = "Select Work_Center, Sequence, Est_Total_Hrs from V_schedule WHERE job  = '" . $txtJob . "'";
$results2 = sqlsrv_query($connPpp, $query2);?>

<form id="frmpromiseddate" name="frmpromiseddate" action="schedule_job_submit.php" method="POST">
       <table  class='table table-bordered table-condensed table-striped'>
           <tr>
               <td>Sequence</td>
               <td>Work Center</td>
               <td>Due Date</td>
           </tr>
<?php while ($row2 = sqlsrv_fetch_array($results2)) {?>
         <tr>
            <td><?php echo $row2['Sequence']?></td>
            <td><?php echo $row2['Work_Center']?></td>
            <td><input type="text" name="duedate" id="duedate" value="" />    </td>
         </tr>
<?php ;} //End of while ?>
</table>

Answer 1

Jquery将id视为唯一标识符，并且一次仅应用于一个元素，因为它将class视为一个组标识符，并且可以一次应用于多个元素，因此在html和Jquery代码中将id更改为class ： -

<td><input type="text" name="duedate" class="duedate" value="" /></td>

和

$('.duedate').datetimepicker({

Answer 2

使用类（。）而不是id（＃）作为日期选择器

Javascript代码：

$('.duedate').datetimepicker()

HTML代码：使id唯一

<?php $i=0;
while ($row2 = sqlsrv_fetch_array($results2)) {?>
     <tr>
        <td><?php echo $row2['Sequence']?></td>
        <td><?php echo $row2['Work_Center']?></td>
        <td><input type="text" name="duedate" class="duedate" id="duedate_<?php echo $i;?>" value="" />    </td>
     </tr>
<?php $i++; } //End of while ?>