在创建的表行中使用Bootstrap Datepicker [英] Using Bootstrap Datepicker in the created table rows
本文介绍了在创建的表行中使用Bootstrap Datepicker的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在为项目创建数据夹，并且需要在日期"字段中使用Bootstrap Datepicker. 问题在于，在表中只有第一行(先前创建的)具有日期选择器. 如果我创建第二行，则日期选择器不起作用.
I'm creating a data grip for a project and I need to use Bootstrap Datepicker to the Date field. The problem is that in the table only the first row (that is previously created) has the datepicker working. If I create a second row, the datepicker isn't working.
能请你帮我吗?我想让日期选择器在每个创建的行中都能正常工作，并且只在日期"字段中工作.
Could you please help me? I would like to have the datepicker working fine in every created row and only on the Date field.
下面是我的代码:
function getElementsByClassName(c,el){
if(typeof el=='string'){
el=document.getElementById(el);
}
if(!el){
el=document;
}
if(el.getElementsByClassName){
return el.getElementsByClassName(c);
}
var arr=[],
allEls=el.getElementsByTagName('*');
for(var i=0;i<allEls.length;i++){
if(allEls[i].className.split(' ').indexOf(c)>-1){arr.push(allEls[i])}
}
return arr;
}
function killMe(el){
return el.parentNode.removeChild(el);
}
function getParentByTagName(el,tag){
tag=tag.toLowerCase();
while(el.nodeName.toLowerCase()!=tag){
el=el.parentNode;
}
return el;
}
// Delete table row
function delRow(){
killMe(getParentByTagName(this,'tr'));
}
// Insert table row
function addRow() {
var table = getParentByTagName(this,'table')
var lastInputs=table.rows.length>2?
table.rows[table.rows.length-2].getElementsByTagName('input'):[];
for(var i=0;i<lastInputs.length-1;i++){
if(lastInputs[i].value==''){return false;}
}
// New table row vars
var rowCount = table.rows.length;
var row = table.insertRow(rowCount-1);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.id = "expenseDate";
element1.type = "text";
element1.className="form-control datepicker";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.className="form-control";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.className="form-control";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.className="form-control";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "button";
element5.className="del btn btn-sm btn-danger";
element5.value='X';
element5.onclick=delRow;
cell5.appendChild(element5);
}
#ExpensesTable {
margin-top: 30px;
}
#ExpensesTable tr {
margin: 10px 0px 10px 0px;
}
#ExpensesTable td {
padding: 5px 5px 0px 5px;
}
#ExpensesTable th {
padding: 0px 5px 5px 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap-datepicker.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<table id="ExpensesTable">
<tr>
<th>Date:</th>
<th>From:</th>
<th>To:</th>
<th>Nr. Km:</th>
</tr>
<tr>
<td><input class="add btn btn-sm btn-success" type="button" value="Add expense" id="AddExpense"/></td>
</tr>
</table>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript" src="bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
(function(){
var els=getElementsByClassName("add","ExpensesTable");
for(var i=0;i<els.length;i++){
els[i].onclick=addRow;
}
els[0].onclick();
})();
</script>
<script>
$('#expenseDate').datepicker({
});
</script>
</body>
</html>
推荐答案
尝试利用jquery加快编码速度，然后最终需要4-5行代码来完成所需的操作:)
try to leverage jquery to speed coding up and then you end up with like,, 4-5 lines of code to do what you need :)
欢呼，
$('.dateP').datetimepicker();
$('.dupli').on( 'click', function(e){
var dup = $('.cpy').first().clone();
$('.table').append( dup );
$('.dateP').datetimepicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<table class="table table-striped">
<tr>
<th>Event name</th>
<th>Date:</th>
<td><button type="submit" class="btn btn-default dupli">+</button></td>
</tr>
<tr class="cpy">
<td>
<input type="text" class="form-control" id="e1">
</td>
<td>
<div class='input-group dateP'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</td>
</tr>
</table>
这篇关于在创建的表行中使用Bootstrap Datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
