如何用一个开始日期更改多个表行的日期
问题描述:
现在,当每行中选择一个开始日期并单击确定时,结束日期将相应显示。所以每个表格行必须手动点击一个按钮来显示结束日期。如何用一个开始日期更改多个表行的日期
我想知道是否有可能,如果我只能选择一个开始日期,然后点击确定, 不仅第一行结束日期显示,而且第二,第三...等行start date
和end date
会自动显示因此到间隔天数
PS:请注意,来自数据库的行数是动态的,并且总行数未知。
任何想法将不胜感激。谢谢 !!
(function($, window, document, undefined){
$(".addSkip").click(function() {
// row instance to use `find()` for the other input classes
var $row = $(this).closest('tr');
var date = new Date($row.find(".start_date").val()+" 0:00:00"),
days = parseInt($row.find(".days").val(), 10);
console.log(date.getDate());
console.log(days);
if (!isNaN(date.getTime())) {
date.setDate(date.getDate() + days);
$row.find(".end_date").val(date.toInputFormat());
} else {
alert("Invalid Date");
}
});
Date.prototype.toInputFormat = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
var dd = this.getDate().toString();
return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) + "-" + (dd[1]?dd:"0"+dd[0]); // padding
};
})
(jQuery, this, document);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<th>
start</th>
<th>end</th>
<th>interval</th>
<tr>
<td><input type="date" size="15" name="date[]" class="start_date" \>
<input type="button" size="10" value="ok" class="addSkip"></td>
<td><input type="text" size="15" name="nextdate[]" class="end_date" \> </td>
<td><input type="text" size="3" name="skip[]" class="days" value="10"> </td>
</tr>
<tr>
<td><input type="date" size="15" name="date[]" class="start_date" \>
<input type="button" size="10" value="ok" class="addSkip"></td>
<td><input type="text" size="15" name="nextdate[]" class="end_date" \> </td>
<td><input type="text" size="3" name="skip[]" class="days" value="10"> </td>
</tr>
<tr>
<td><input type="date" size="15" name="date[]" class="start_date" \>
<input type="button" size="10" value="ok" class="addSkip" ></td>
<td><input type="text" size="15" name="nextdate[]" class="end_date" \> </td>
<td><input type="text" size="3" name="skip[]" class="days" value="10">
</tr>
</table>
期望的结果
start end interval
13/10/17 20/10/17 7
20/10/17 23/10/17 3
23/10/17 30/10/17 7
...... 等
答
我已经删除了“确定”按钮,取而代之的是简单的改变事件(无论在DATE_START和天),并且增加了逻辑您的需求!如果事情是不明确的,不esitate要求澄清;)
(function($, window, document, undefined){
$('input.start_date, input.days').on('change',function() {
var $row = $(this).closest('tr'),
$start = $row.find('.start_date'),
$end = $row.find('.end_date'),
$other = $row.find('.otherfield'),
$interval = $row.find('.days'),
date = new Date($start.val()+" 0:00:00"),
days = parseInt($interval.val(), 10);
console.log(date.getDate());
console.log(days);
if (!isNaN(date.getTime())) {
date.setDate(date.getDate() + days);
$end.val(date.toInputFormat());
$other.val(date.toInputFormat());
$row.next('tr')
.find('.start_date').val(date.toInputFormat()).trigger('change');
} else {
console.log("Invalid Date");
}
});
Date.prototype.toInputFormat = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
var dd = this.getDate().toString();
return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) + "-" + (dd[1]?dd:"0"+dd[0]); // padding
};
})
(jQuery, this, document);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>start</th>
<th>end</th>
<th>other</th>
<th>interval</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="date" size="15" name="date[]" class="start_date" \>
<td><input type="text" size="15" name="nextdate[]" class="end_date" \> </td>
<td><textarea class="otherfield"></textarea></td>
<td><input type="text" size="3" name="skip[]" class="days" value="10"> </td>
</tr>
<tr>
<td><input type="date" size="15" name="date[]" class="start_date" \>
<td><input type="text" size="15" name="nextdate[]" class="end_date" \> </td>
<td><textarea class="otherfield"></textarea></td>
<td><input type="text" size="3" name="skip[]" class="days" value="10"> </td>
</tr>
<tr>
<td><input type="date" size="15" name="date[]" class="start_date" \>
<td><input type="text" size="15" name="nextdate[]" class="end_date" \> </td>
<td><textarea class="otherfield"></textarea></td>
<td><input type="text" size="3" name="skip[]" class="days" value="10"></td>
</tr>
</tbody>
</table>
答
你想要的所有行会显示相同的结束日期?或者所有的结束都必须显示相应的开始对应的值? –
我已经用表格更新了这个问题,请看看,谢谢你 – epiphany
所以,你希望在第一个start_date中插入一个日期到2017-01-01(ex),脚本详细说明相对的end_date并设置另一个start_date到2017-01-02,2017-01-03等详细阐述每个end_date,对吧? –