Using Bootstrap Datepicker in the created table rows

问题

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.

Below is my code:

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>

回答1:

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 :)

cheers,

$('.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>

来源：https://stackoverflow.com/questions/44040422/using-bootstrap-datepicker-in-the-created-table-rows

标签

javascript

jquery

css

twitter-bootstrap

datepicker