This question already has answers here:
What is DOM Event delegation?
(10 answers)
Closed 4 years ago.
I have a table in which an input control calls a java script event
oninput="this.value=this.value.replace(/[^0-9]/g,'');
By Clicking on Add Row new Row is being inserted but i want to call this event on new row as well . This event is to stop except positive whole numbers
using the following code.
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<input type="hidden" id="minsize" value="1">
<div class="">
<table id="mintable" class="table table-bordered table-striped stripe hover row-border">
<thead class="div-head">
<tr>
<th><b>Roll No</b></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id='rollno0' oninput="this.value=this.value.replace(/[^0-9]/g,'');" class="form-control"></td>
</tr>
</tbody>
</table>
<input type="hidden" name="minRows" id="minRows" value='1'>
<input type="hidden" id="sizemin" name="sizemin" value='1' />
</div>
<input type="submit" data-toggle="tooltip" title="Insert new horizon
" data-placement="top" class="btn btn-primary" id="button" value="Add Row" onClick="addRow()" />
<script>
function addRow() {
var table = document.getElementById("mintable");
var rowCount = parseInt(document.getElementById("minRows").value);
var rowInsert = parseInt(document.getElementById("sizemin").value);
var row = table.insertRow(rowInsert + 1);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.id = "rollnoo" + (rowCount);
element1.className = "form-control";
cell1.appendChild(element1);
rowCount = parseInt(rowCount)+ 1;
document.getElementById("minRows").value = rowCount;
document.getElementById("sizemin").value =
parseInt(document.getElementById("sizemin").value) + 1;
}
</script>
</body>
</html>
Try the following syntax to add event handler to newly created element:
element1.oninput = function() {
this.value = this.value.replace(/[^0-9]/g,'');
}
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<input type="hidden" id="minsize" value="1">
<div class="">
<table id="mintable" class="table table-bordered table-striped stripe hover row-border">
<thead class="div-head">
<tr>
<th><b>Roll No</b></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id='rollno0' oninput="this.value=this.value.replace(/[^0-9]/g,'');" class="form-control"></td>
</tr>
</tbody>
</table>
<input type="hidden" name="minRows" id="minRows" value='1'>
<input type="hidden" id="sizemin" name="sizemin" value='1' />
</div>
<input type="submit" data-toggle="tooltip" title="Insert new horizon
" data-placement="top" class="btn btn-primary" id="button" value="Add Row" onClick="addRow()" />
<script>
function addRow() {
var table = document.getElementById("mintable");
var rowCount = parseInt(document.getElementById("minRows").value);
var rowInsert = parseInt(document.getElementById("sizemin").value);
var row = table.insertRow(rowInsert + 1);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.id = "rollnoo" + (rowCount);
element1.className = "form-control";
element1.oninput = function() {
this.value = this.value.replace(/[^0-9]/g,'');
}
cell1.appendChild(element1);
rowCount = parseInt(rowCount)+ 1;
document.getElementById("minRows").value = rowCount;
document.getElementById("sizemin").value =
parseInt(document.getElementById("sizemin").value) + 1;
}
</script>
</body>
</html>
Related
Javascript jquery AutoComplate İnput not Working .I can try but not this. Add package link but AutoComplate İnput not Working.
I want only add pack after autocomplete input working. Only this..I think insertCell Hard this.I dont understend this. id ='dap'
$(function() {
var availableTags = [
"arta",
"barta",
"barta2",
];
$("#dap").autocomplete({
source: availableTags
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title></title>
</head>
<body>
<form method="post" action="add.php">
<table id="table1">
<tr>
<br>
<td colspan="4"><a onclick="myFunction1()" style=" color: #000; margin-top: 10px"><i></i> Paket Ekle</a> <a onclick="myDeleteFunction1()" style="color: #000; margin-top: 10px"><i ></i> Paket Sil</a></td>
</tr>
<tr>
<td valign="bottom"><strong>GTIP No.</strong></td>
</tr>
<tr>
<td><input name="dap" type="text" style="width:90%; margin-top: 15px"></td>
<script>
var i = 1;
function myFunction1() {
var table = document.getElementById("table1");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
cell1.innerHTML = "<input name='dap" + i + "' id='dap' type='text' style='width:90%;margin-top:15px;' >";
i++;
}
function myDeleteFunction1() {
document.getElementById("table1").deleteRow(-1);
}
</script>
</table>
</form>
</body>
</html>
You can use on to bind event on dynamically added element
$(function() {
var availableTags = [
"arta",
"barta",
"barta2",
];
$(document).on('keydown.autocomplete', '#dap', function() {
$(this).autocomplete({
source: availableTags
});
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title></title>
</head>
<body>
<form method="post" action="add.php">
<table id="table1">
<tr>
<br>
<td colspan="4"><a onclick="myFunction1()" style=" color: #000; margin-top: 10px"><i></i> Paket Ekle</a> <a onclick="myDeleteFunction1()" style="color: #000; margin-top: 10px"><i ></i> Paket Sil</a></td>
</tr>
<tr>
<td valign="bottom"><strong>GTIP No.</strong></td>
</tr>
<tr>
<td><input name="dap" type="text" style="width:90%; margin-top: 15px"></td>
<script>
var i = 1;
function myFunction1() {
var table = document.getElementById("table1");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
cell1.innerHTML = "<input name='dap" + i + "' id='dap' type='text' style='width:90%;margin-top:15px;' >";
i++;
}
function myDeleteFunction1() {
document.getElementById("table1").deleteRow(-1);
}
</script>
</table>
</form>
</body>
</html>
This question already has answers here:
How to insert a row in an HTML table body in JavaScript
(13 answers)
Closed 1 year ago.
I recently started to code and I'm trying to build an expense application using HTML, CSS, and JavaScript. I'm creating a replica of this photo
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Expense Tracker</title>
</head>
<body>
<h1>Expense Tracker</h1>
<div id="myDiv">
<label for="name">Name:</label>
<input type="text" name="myInput" id="myInput" placeholder="Name of expense" size="50"><br><br>
<label for="date">Date:</label>
<input type="date" id="myDate" name="myDate">
<label for="amount">Amount:</label>
<input type="text" name="myAmount" id="myAmount" placeholder="Dollar amount ($)"><br><br>
<span onclick="addRow()" class="addBtn">Add Expense</span>
</div>
<br>
<table id="myTable">
<tr>
<th>Name</th>
<th>Date</th>
<th>Amount</th>
<th>Delete</th>
</tr>
<tr>
<td>McDonald's</td>
<td>6/22/2017</td>
<td>$12.00</td>
<td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
</table>
<script src="script.js"></script>
</body>
</html>
Here is my JavaScript, so far:
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(i);
}
How do I add additional rows using JavaScript? I can delete rows, using the JavaScript code above, but I am having a hard time figuring out how to add new elements.
You will need to do this via DOM manipulation.
Something like this should work...
<button type="button" onclick="myFunction()">New row</button>
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}
First let me start by saying I am very new to javascript. I am currently studying the subject as part of a course I am doing.
I have an assignment that requires me to put together image slices in a table built by javascript and place it in a on a HTML page.
I have had success with all of this except when i attempt to resize the table and div section with CSS the images separate leaving gaps in the image. Is there anyone out there who can see why i am getting this issue? Im pulling my hair out.
here is my code.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bazaar Ceramics</title>
<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="ie_only.css"/> <![endif]-->
<link href="../../CSS/ie_only.css" rel="stylesheet" type="text/css">
<link href="../../CSS/laptop.css" rel="stylesheet" type="text/css">
<link href="../../CSS/Layout.css" rel="stylesheet" type="text/css">
<link href="../../CSS/mobile.css" rel="stylesheet" type="text/css">
<link href="../../CSS/style.css" rel="stylesheet" type="text/css">
<link href="../../CSS/tablet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mainwrapper">
<div id="header"><img id="logo" src="../../images/bazaar-logo.jpg" alt="Bazaar Ceramics Logo"><h1 class="title">Bazaar Ceramics</h1>
</div><!--this is the end of div Header-->
<div id="ImageContent"><script src="../../Script/ImageContent.js"> </script></div><!--this is the end of div id ImageContent-->
<div id="formContent">
<h1 class="prodhead">Order Item</h1>
<form action="#" name="orders">
<table id="formtab">
<tr>
<td width="20%"><label>Item Description:</label></td> <td><input type="text" name="description" size="100%" value="Red Bowl" disabled></td>
</tr>
<tr>
<td><label>Quantity:</label></td><td><input type="text" name="quantity" value="1" min="1"></td>
<tr>
<td><label>Price:</label></td><td><input type="text" name="price" value="$350" disabled></td>
</tr>
<tr>
<td><label>Total Price:</label></td><td><input type="text" name="total"></td>
</tr>
<tr>
<th colspan="2"><input type="button" name="clear" value="Clear Form" id="button"> <input type="button" name="calculate" value="Calculate Total" id="button"> <input type="button" name="Submit" value="Submit Order" id="button"></th>
</table>
</form>
</div><!--this is the end of div id formContent-->
<div id="footer">
Home
Close
<br style="clear:both"><p id="copyright">Copyright 2018 Online System Solutions</p></div><!--this is the end of dive id footer-->
</div><!--end of mainwrapper-->
</body>
</html>
CSS Code
.myTable {
max-width:90%;
}
.myImg{
display:block;
max-width: 100%;
height: auto;
width: auto;
vertical-align:middle;
}
javascript
// constants
var colCount=5;
var rowCount=4;
// input data
var col1 = new Array("r1_c1","r2_c1","r3_c1","r4_c1");
var col2 = new Array("r1_c2", "r2_c2", "r3_c2", "r4_c2");
var col3 = new Array("r1_c3", "r2_c3", "r3_c3", "r4_c3");
var col4 = new Array("r1_c4", "r2_c4", "r3_c4", "r4_c4");
var col5 = new Array("r1_c5", "r2_c5", "r3_c5", "r4_c5");
// create the column array.
var collist = [col1,col2,col3,col4,col5];
// make the table.
document.write('<table class="myTable" cellspacing="0" cellpadding="0" align="center">');
for (rownum = 1; rownum <= rowCount; rownum++) {
document.write("<tr>");
for (colnum = 1; colnum <= colCount; colnum++) {
document.write("<td>" + '<img src="../../images/Large/bcpot002_' + (collist[(colnum-1)])[(rownum-1)] + '.jpg"' + 'class="myImg">' + '</img>' + "</td>");
}
document.write("</tr>");
}
document.write('</table>')
Any help here would be great thanks.
Hello I am new to website development (started a couple of days ago).
I have some programming experience using Python and C#.
I have been trying to generate an HTML table using JS and apply it a Bootstrap css style.
I can't seem to get it to work.
What I get:
What I want:
I hope to get something that styles like this (simplified from: w3schools)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
</table>
</div>
</body>
</html>
My html page looks like this:
<!DOCTYPE html>
<html>
<head>
<title>CSVParser</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<script type="text/javascript" src="../scripts/csvToHtml.js"></script>
<form onsubmit="return processFile();" action="#" name="myForm" id="aForm" method="POST">
<input type="file" id="myFile" name="myFile"><br>
<input type="submit" name="submitMe" value="Process File">
</form>
<table id="myTable" class="table"></table>
</div>
</body>
</html>
and the JS script is:
function processFile() {
var fileSize = 0;
var theFile = document.getElementById("myFile").files[0];
if (theFile) {
var table = document.getElementById("myTable");
var headerLine = "";
var myReader = new FileReader();
myReader.onload = function(e) {
var content = myReader.result;
var lines = content.split("\r");
for (var count = 0; count < lines.length; count++) {
var row = document.createElement("tr");
var rowContent = lines[count].split(",");
for (var i = 0; i < rowContent.length; i++) {
if (count == 0) {
var cellElement = document.createElement("th");
} else {
var cellElement = document.createElement("td");
}
var cellContent = document.createTextNode(rowContent[i]);
cellElement.appendChild(cellContent);
row.appendChild(cellElement);
}
myTable.appendChild(row);
}
}
myReader.readAsText(theFile);
}
return false;
}
The csv data file I load looks like this:
TestA,TestB,TestC,TestD
Alpha,0.551608445,0.807554763,54.8608682
Beta,0.191220409,0.279946678,57.55254144
This is the generated HTML table from the JS:
<table id="myTable" class="table">
<tr>
<th>TestA</th>
<th>TestB</th>
<th>TestC</th>
<th>TestD</th>
</tr>
<tr>
<td>Alpha</td>
<td>0.551608445</td>
<td>0.807554763</td>
<td>54.8608682</td>
</tr>
<tr>
<td>Beta</td>
<td>0.191220409</td>
<td>0.279946678</td>
<td>57.55254144</td>
</tr>
<tr>
<td></td>
</tr>
</table>
You are missing a <tbody> element around all the <tr> Elements. thats it. if you insert this additionally you are fine with your layout.
I've changed your code quite a bit but here is a working example:
<!DOCTYPE html>
<html>
<head>
<title>CSVParser</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="#" name="myForm" id="aForm" method="POST">
<input type="file" id="myFile" name="myFile"><br>
<input type="button" name="submitMe" value="Process File" onclick="processFile();">
</form>
<table id="myTable" class="table"></table>
</div>
</body>
<script type="text/javascript">
function processFile() {
var fileSize = 0;
var theFile = document.getElementById("myFile").files[0];
if (theFile) {
var table = document.getElementById("myTable");
var headerLine = "";
var myReader = new FileReader();
myReader.onload = function(e) {
var content = myReader.result;
var lines = content.split("\r");
var tbody = document.createElement("tbody");
for (var count = 0; count < lines.length; count++) {
var row = document.createElement("tr");
var rowContent = lines[count].split(",");
for (var i = 0; i < rowContent.length; i++) {
if (count == 0) {
var cellElement = document.createElement("th");
} else {
var cellElement = document.createElement("td");
}
var cellContent = document.createTextNode(rowContent[i]);
cellElement.appendChild(cellContent);
row.appendChild(cellElement);
}
tbody.appendChild(row);
}
table.appendChild(tbody);
}
myReader.readAsText(theFile);
}
return false;
}
</script>
</html>
Working example without having to upload a file
<!DOCTYPE html>
<html>
<head>
<title>CSVParser</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="#" name="myForm" id="aForm" method="POST">
<textarea id="myFile" name="myFile">TestA,TestB,TestC,TestD
Alpha,0.551608445,0.807554763,54.8608682
Beta,0.191220409,0.279946678,57.55254144</textarea><br>
<input type="button" name="submitMe" value="Process File" onclick="processFile();">
</form>
<table id="myTable" class="table"></table>
</div>
</body>
<script type="text/javascript">
function processFile() {
var table = document.querySelector("#myTable");
var content = $("#myFile").val();
var lines = content.split("\n");
var tbody = document.createElement("tbody");
for (var count = 0; count < lines.length; count++) {
var row = document.createElement("tr");
var rowContent = lines[count].split(",");
for (var i = 0; i < rowContent.length; i++) {
if (count == 0) {
var cellElement = document.createElement("th");
} else {
var cellElement = document.createElement("td");
}
var cellContent = document.createTextNode(rowContent[i]);
cellElement.appendChild(cellContent);
row.appendChild(cellElement);
}
tbody.appendChild(row);
}
table.appendChild(tbody);
return false;
}
</script>
</html>
ALSO! You are using myTable.appendChild(row); in your code although you've never initialized any myTable variable.
Load your js script just before the </body> end tag.
Now you are loading the JavaScript before the browser has read all your tags and by then it can't find the elements you are querying in your script.
<body>
<div class="container">
<form onsubmit="return processFile();" action="#" name="myForm" id="aForm" method="POST">
<input type="file" id="myFile" name="myFile"><br>
<input type="submit" name="submitMe" value="Process File">
</form>
<table id="myTable" class="table"></table>
</div>
<!-- Here's the difference -->
<script type="text/javascript" src="../scripts/csvToHtml.js"></script>
</body>
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>
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>