Question

我当前的读数只显示第一行上的数据贴纸，即使它在for循环中我的jquery不强，但我相信这就是我的问题所在。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
 <script>
  $(function() {
    $( "#datepicker" ).datepicker()
    $( "#format" ).change(function() {
      $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
    });
  });
  </script>

这只是我的代码的html可能我需要为此添加一个类，但是如果jquery基于id运行代码则无关紧要。

                <tr>
                <th><input type="checkbox" id="selectall"/>   Check All</th>
                    <th>Rootname </th>
                    <td>Urls</td>
                    <th>custs </th>
                    <th> jvmms </th>
                    <th>x64 </th>
                    <th>currentplatform </th>
                    <th> currentjdk </th>
                    <th>currenttomcat </th>
                    <th>Time </th>
                    <th>Date </th>
                </tr>
                    {% for status in root %}
                <tr>
                <td align="center"><input type="checkbox" class="case" name="case"></td>
                    <td>{{ status.rootname }}</td>
                    <td>{{ status.urls }}</td>
                    <td>{{ status.custs }}</td>
                    <td> {{ status.jvmms }}</td>
                    <td>{{ status.x64 }}</td>
                    <td>{{ status.currentplatform }}</td>
                    <td> {{ status.currentjdk }}</td>
                    <td>{{ status.currenttomcat }}</td>
                    <td><p> <input type="text" class="pick" id="datepicker" size="25" /></p></td>
                            <td>
                <input type="text" value="12:00" size="3" />
                <select name="ampm">
                    <option value="am">AM</option>
                    <option value="pm">PM</option>
                </select></td>


                </tr>

                    {% endfor %}

            </table>

Answer 1

您应该将jquery代码应用于类而不是元素id：

$(".pick").datepicker();
$("#format").change(function() {
      $(".pick").datepicker("option", "dateFormat", $(this).val());
});

id和class之间的区别在于，一个类可以在页面上重复使用，但id只能使用一次。因此，如果您将任何函数附加到id选择器，它将只使用一次。

Answer 2

Matino在关于课程的陈述中是正确的，但是使用django你只需要在html中添加一个forloop.counter。

**$(".pick").datepicker();
$("#format").change(function() {
  $(".pick").datepicker("option", "dateFormat", $(this).val());
    });**

<td> <p class= "selector"> <input type="text" class="pick" id="datepick **{{forloop.counter}}**" size="25"  /> </p> </td>
                        <td>

如何将datepicker（）应用于django模板中的每个表格字符？

2 个答案: