我已经在一行中创建了表格,并在表格中添加了行按钮。当我们点击添加按钮时,它会在表格中创建第一行的相同副本。
带有 jsfiddle 的完整工作代码:
https://jsfiddle.net/r83vmv1q/12/
我尝试在文本框中显示两天的差异。 这是查看代码:
<td><input type="checkbox" name="chk"/></td>
<!-- <td><input type="text" name="date[]" value="" /></td>-->
<td><input type="text" name="work[]" value="" class="task" />
<span class="text-danger"><?php echo form_error('work[]');?></span>
</td>
<td><input type="text" name="assigned_date[]" value="" class="assigned_date" />
<span class="text-danger"><?php echo form_error('assigned_date[]');?></span>
</td>
<td><input type="text" name="last_date[]" value="" class="last_date" />
<span class="text-danger"><?php echo form_error('last_date[]');?></span>
</td>
<td><input type="text" name="spent[]" value="" class="spent" />
<span class="text-danger"><?php echo form_error('spent[]');?></span>
</td>
<td><input type="text" name="remaining[]" value="" />
<span class="text-danger"><?php echo form_error('remaining[]');?></span>
</td>
<td><input type="text" name="frequency[]" value="" />
<span class="text-danger"><?php echo form_error('frequency[]');?></span>
</td>
所以我的问题是当用户从 j 查询中选择分配日期和最后日期时,当前日期和分配日期之间的差异应该显示在用过的文本框中,最后日期和当前日期之间的差异应该显示在剩余文本框中。
这是添加新行的 jquerycode:
<SCRIPT language="javascript">
function addRow(tableID) {
$(".last_date").datepicker("destroy");
$(".assigned_date").datepicker("destroy");
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[1].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
var dateAssignedId = Math.round(new Date().getTime() + (Math.random() * 100));
var dateDueId = Math.round(new Date().getTime() + (Math.random() * 100));
$(row).find('.assigned_date')[0].id = dateAssignedId;
$(row).find('.last_date')[0].id = dateDueId;
$(".assigned_date").datepicker({dateFormat: "yy-mm-dd"});
$(".last_date").datepicker({dateFormat: "yy-mm-dd"});
}
</SCRIPT>
<script>
$(".assigned_date").datepicker({dateFormat: "yy-mm-dd"});
$(".last_date").datepicker({dateFormat: "yy-mm-dd"});
</script>
这里是 jquery 计算差异代码:
var start = new Date();
var end = $('assigned_date').datepicker('getDate');
var days = (end - start)/1000/60/60/24;
var textbox = document.getElementByClass("spent");
textbox.value = days;
这是 jsfiddle 中的完整工作代码: JSFiddle
最佳答案
首先像这样更改所有调用 datepickar 选项设置的地方
$(".assigned_date").datepicker({dateFormat: "yy-mm-dd", onSelect:onChangeDate});
在 datepickar 选择日期时调用一个函数。
function onChangeDate(dateText, inst){
var start = new Date();
var end = $(this).datepicker('getDate');
var days = Math.ceil((end - start)/1000/60/60/24);
if( $(this).hasClass('assigned_date') ){
$(this).closest('tr').find('.spent').val(days);
}
// you can add more conditional logic here
}
关于jquery - 两个日期的差异显示在另一个文本框中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38867233/