Как использовать DatePicker для динамически заполненных строк?

Question

Как использовать DatePicker для динамически заполненных строк?

0

Я работаю с Asp.Net MVC3. Ниже приведена страница просмотра,

<link rel="stylesheet" href="@Url.Content("~/Content/CSS/jquery-ui.css")">  
<script src="@Url.Content("~/Content/Scripts/jquery-1.9.1.js")"></script>  
<script src="@Url.Content("~/Content/Scripts/jquery-ui-1.10.4.js")"></script>  
<script type="text/javascript">
    $(function () {
        $("#Reqrecdt").datepicker();
        $("#Docsreqdt").datepicker();
    });
</script>

@for(i = 0; i <= 3; i++) {
    <tr>
        <td><input type="text" name="ReqrecdDate" id="Reqrecdt" /></td>
        <td><input type="text" name="DocsreqDate" id="Docsreqdt" /></td>
    </tr>
}

Во время выполнения решения я получаю Datepicker для текстового поля первой строки. что мне нужно изменить, чтобы получить datepicker на динамических строках с помощью jquery?

user2514925 12 май 2014, в 12:12

Источник

Теги:

javascript

jquery

datepicker

jquery-ui

jquery-ui-datepicker

3 ответа

Ещё вопросы

Rory McCrossan · Answer 1 · 2014-05-12T08-08-00.000Z

атрибуты id должны быть уникальными на странице. Имея это в виду, вам нужно использовать class:

<script type="text/javascript">
    $(function () {
        $(".Reqrecdt").datepicker();
        $(".Docsreqdt").datepicker();
    });
</script>

@for(i = 0; i <= 3; i++) {
    <tr>
        <td><input type="text" name="ReqrecdDate" class="Reqrecdt" /></td>
        <td><input type="text" name="DocsreqDate" class="Docsreqdt" /></td>
    </tr>
}

Felix · Answer 2 · 2014-05-12T06-19-00.000Z

Поскольку id должен быть уникальным, вам нужно вместо этого использовать класс:

@for(i = 0; i <= 3; i++) {
    <tr>
        <td><input type="text" name="ReqrecdDate" class="Reqrecdt" /></td>
        <td><input type="text" name="DocsreqDate" class="Docsreqdt" /></td>
    </tr>
}

то вы можете использовать . для целевых элементов по имени класса:

$(function () {
    $(".Reqrecdt").datepicker();
    $(".Docsreqdt").datepicker();
});

Leonard Feehan · Answer 3 · 2014-05-12T06-22-00.000Z

Ваша результирующая разметка будет иметь несколько элементов с одним и тем же идентификатором, поэтому первый из них - все, что попадет в скрипт. Используйте класс class= "Reqrecdt" и измените свой скрипт на $ (". Reqrecdt"). Datepicker();