1
我正在爲項目創建數據控制柄，並且需要使用引導日期選擇器到日期字段。 問題是，在表中只有第一行（即以前創建的）具有datepicker的工作。 如果我創建第二行，datepicker不起作用。在創建的表格行中使用引導日期選擇器
你能幫我嗎？我希望datepicker在每個創建的行中都能正常工作，並且只能在日期字段中工作。
下面是我的代碼：
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 {
\t margin-top: 30px;
}
#ExpensesTable tr {
\t margin: 10px 0px 10px 0px;
}
#ExpensesTable td {
\t padding: 5px 5px 0px 5px;
}
#ExpensesTable th {
\t padding: 0px 5px 5px 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
\t <head>
\t </head>
\t <body>
\t <link rel="stylesheet" href="style.css">
\t <link rel="stylesheet" href="bootstrap-datepicker.min.css">
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
\t
\t <div class="container">
\t
\t \t <table id="ExpensesTable">
\t \t <tr>
\t \t <th>Date:</th>
\t \t <th>From:</th>
\t \t <th>To:</th>
\t \t <th>Nr. Km:</th>
\t \t </tr>
\t \t <tr>
\t \t \t <td><input class="add btn btn-sm btn-success" type="button" value="Add expense" id="AddExpense"/></td>
\t \t </tr>
\t \t </table>
\t </div>
\t \t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
\t \t <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
\t \t <script type="text/javascript" src="scripts.js"></script>
\t \t <script type="text/javascript" src="bootstrap-datepicker.min.js"></script>
\t \t <script type="text/javascript">
\t \t (function(){
\t \t var els=getElementsByClassName("add","ExpensesTable");
\t \t for(var i=0;i<els.length;i++){
\t \t els[i].onclick=addRow;
\t \t }
\t \t els[0].onclick();
\t \t })();
\t \t </script>
\t \t <script>
\t \t \t $('#expenseDate').datepicker({
\t \t \t });
\t \t </script>
\t </body>
</html>
原始版本：http://jsfiddle.net/9gnAx/ –
我認爲這個問題與我在HTML中調用datepicker的方式有關......但是我無法達到任何東西.. –
嗨@Hugo，看看我貼的代碼,,我認爲這會幫助你開始:) –