在数据表中单击按钮时将表列更改为jquery日历
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在数据表中单击按钮时将表列更改为jquery日历相关的知识，希望对你有一定的参考价值。
我有以下数据表：
这是代码：
html：
<table id="rentals" class="table table-bordered table-hover">
<thead bgcolor="#ADD8E6">
<tr>
<th>Book Name</th>
<th>Date Rented</th>
<th>Estimated Return Date</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
table = $("#rentals").DataTable({
ajax: {
url: query,
dataSrc: ""
},
columns: [
{
{
data: "book.title"
},
{
data: "dateRented",
render: function (data) {
returnDate = data;
},
{
data: "estimatedReturnDate",
render: function (data) {
var date = new Date(data);
var month = date.getMonth() + 1;
var day = date.getDay();
return date.getDate() + "/" + month + "/" + date.getFullYear();
}
]
});
我希望“Estimated Return Date”列更改为jquery datepicker，默认值等于该列的日期值，当用户点击“Click me”按钮并在用户点击时更改回文本字段让我们说取消按钮。
我怎么能做到这一点？
答案
我认为一个简单的事件监听器应该可以胜任。试试这个：
$(document).on('click','button',function(){
var td = $(this).closest('tr').find('.date');
var picker = td.find('.datepicker');
if(picker.length){
td.html(picker.val());
}else{
td.html('<input class="datepicker" value='+td.text()+'>');
var picker = td.find('.datepicker');
picker.datepicker();
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<table id="rentals" class="table table-bordered table-hover">
<thead bgcolor="#ADD8E6">
<tr>
<th>Book Name</th>
<th>Date Rented</th>
<th>Estimated Return Date</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Book</td>
<td>20/12/2017</td>
<td class='date'>20/12/2017</td>
<td><button>Click me</button></td>
</tr>
</tbody>
</table>以上是关于在数据表中单击按钮时将表列更改为jquery日历的主要内容，如果未能解决你的问题，请参考以下文章
单击按钮时将默认 TableViewCell 更改为自定义子类