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

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

Jquery

和

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

Answer 2

使用class（。）而不是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 ?>

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

2 个答案: