[英]How to attach the datepicker to each row of a table having a same ID?
我有一个JavaScript函数将日期选择器附加到表的每个行数据，并且动态创建行并使用此日期选择器函数附加到字段。但问题是如果我创建了附加行到表，它附加了日期选择器，但在该额外的行中，datepicker不工作，它看起来像禁用状态。
<script> $(document).ready(function() { $("input.add").live('click', function() { var $tr = $(this).closest('tr'); var $clone = $tr.clone(); $clone.find(':text').val(''); $clone.find(':checkbox:checked').prop('checked', false).val('N'); $tr.after($clone); }); $("input.delete").live('click', function() { var rowCount = document.getElementById('phone').getElementsByTagName("tr").length; if (rowCount != 3) { var $tr = $(this).closest('tr'); $tr.remove(); return false; } }); }); $(function() { $("#dob").datepicker({ //showOn: both - datepicker will appear clicking the input box as well as the calendar icon //showOn: button - datepicker will appear only on clicking the calendar icon showOn: 'button', //you can use your local path also eg. buttonImage: 'images/x_office_calendar.png' buttonImage: 'file:///C:/Users/27983/Desktop/calender.jpg', buttonImageOnly: true, changeMonth: true, changeYear: true, duration: 'fast', dateFormat: 'dd-mm-yy' }); }); </script>
<style> #ui-datepicker-div { font-size: 12px; } #datepicker {} </style>
<body> <form name="Basicinfo" id="Basicinfo" method="post" action="Basic.html"> <!-- Start Header --> <table id="phone" width="100%" name="phone"> <tr> <td colspan="5" bgcolor="#5C85B3">Phone</td> </tr> <tr> <th>Type</td> <th>Date</th> <th>*Phone</th> <th>Preferred</th> <th>Add/Delete</th> </tr> <tr> <td> <select name="phntype" id="phntype" style="width:50%"></select> </td> <td> <input id="dob" name="dob" type="text" value=""> </td> <td> <input type="text" name="phone_no" id="phone_no" value=""> </td> <td> <input type="hidden" name="prefferd" value="NO"> <input type="checkbox" name="preferred" id="preferred" value="N" onchange="changeCheckBox();"> </td> <td> <input type="button" value="+" class="add"> <input type="button" value="-" class="delete"> </td> </tr> </table> </form> </body>
你知道，id属性应该是唯一的。 你最好设置一个班级：
<input class="datePickerInput" name="dob" type="text" value="">
然后按类而不是id选择它：
$(".datePickerInput").datepicker({
尝试这个...
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
$(function() {
$('input').filter('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: 'jquery/images/calendar.gif',
buttonImageOnly: true
});
});
<p>Date1 <input class="datepicker" type="text" readonly="true"></p>
<p>Date2<input class="datepicker" type="text" readonly="true"></p>
<p>Date3<input class="datepicker" type="text" readonly="true"></p>
尝试这个：
$(document).ready(function(){
var count = 0;
$(".add").on("click",function(){
count = count+1;
var curid = 'date'+count;
var $tr = $(this).closest('tr');
var $clone = $tr.clone();
$clone.find(':text').val('');
$clone.find('.date').attr('id',curid).attr('class','date').datepicker();
$clone.find(':checkbox:checked').prop('checked', false).val('N');
$tr.after($clone);
});
$(".date").datepicker();
});
<table id="phone" width="100%" name="phone">
<tr>
<td colspan="5" bgcolor="#5C85B3">Phone</td>
</tr>
<tr>
<th>Type</td>
<th>Date</th>
<th>*Phone</th>
<th>Preferred</th>
<th>Add/Delete</th>
</tr>
<tr>
<td>
<select name="phntype" id="phntype" style="width:50%"></select>
</td>
<td>
<input class="date" id="dob" name="dob" type="text" value="" />
</td>
<td>
<input type="text" name="phone_no" id="phone_no" value="" />
</td>
<td>
<input type="hidden" name="prefferd" value="NO" />
<input type="checkbox" name="preferred" id="preferred" value="N" onchange ="changeCheckBox();" />
</td>
<td>
<input type="button" value="+" class="add" />
<input type="button" value="-" class="delete" />
</td>
</tr>
</table>
刚刚在动态添加的日期输入字段中添加了一个类，并将datepicker绑定到它。
当表数据的每一行具有相同的class ='datapicker'时，如何调用此datepicker函数？
[英]how to call this datepicker function while each row of table data is having the same class='datapicker'?
如何将新行动态添加到表中，每行中都有表标题和列？
[英]How to add new row into table dynamically,where in each row having table heading and column?
如何从JavaScript的附加表中获取每一行的ID值
[英]how to get the id value in each row from the append table in JavaScript
用生成表 <divs> 每行应包含同一组html元素，但具有唯一的ID？
[英]Generate a table with <divs> where each row should contains same set of html elements but with unique id's?
jQuery：表的每一行中的计算在每一行中显示相同的结果
[英]Jquery: calculation in each row of a table showing same result in each row
如何生成序列 ID 并向上或向下移动表行并动态调整每行的序列 ID？
[英]How to generate sequence id and move table rows up or down and dynamically adjusting each row's sequence ID?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.