Adding DateTime in Table row Dynamically

Question

How to Add Date Time dynamically using Jquery

 

 

<div class="container">

<h3 style="color:orange">Medical History V1.0 101-001</h3>

<ul class="nav nav-tabs">

<li ><a data-toggle="tab" href="#div1">I.(3/3)</a></li>

<li class="active"><a data-toggle="tab" href="#div2">II.(8/8)</a></li>

</ul>

<div class="tab-content">

<div id="dtBox"></div>

<div id="div1" class="tab-pane fade">

<div class="panel panel-default">

<div class="panel panel-heading col-xs-12" style="font-size:large">

<div class="panel-title" style="font-size:large">Title: Section I. Personal History</div>

</div>

<div class="panel-body">

<table class="table table-bordered" id="table2" style="margin:1px">

<thead>

<tr>

<th style="text-align:center;background-color:lightgray;color:black"><strong> Diagnosis:</strong></th>

<th style="text-align:center;background-color:lightgray;color:black"><strong>Date of Diagnosis:</strong></th>

<th style="text-align:center;background-color:lightgray;color:black"><strong>Comments:</strong></th>

<th style="text-align:center;background-color:lightgray;color:black"></th>

</tr>

</thead>

<tr>

<td>

<input type="text" class="form-control" id="txtdiagsys" name="txtdiagsys" value="Type 2 Diabetes" />

</td>

<td>

<input type="text" class="form-control PasteDisable" data-field="datetime" readonly="true" id="dates" />

</td>

<td>

<input type="text" class="form-control" id="txtvcomments" name="txtvcomments"/>

</td>

<td>

<button type="button" class="close" data-dismiss="tr" aria-label="Close" style="color:red;opacity:10"><span aria-hidden="true">&times;</span></button>

</td>

</tr>

</table>

<button type="button" id="btnadd1" name="btnadd1" class="btn btn-primary btn-xs" >Add</button>

<hr />

<p></p>

</div>

</div>

</div>

<div id="div2" class="tab-pane fade in active">

<div class="panel panel-default">

<div class="panel panel-heading col-xs-12" style="font-size:large">

<div class="panel-title" style="font-size:large">Title: Section II. Family History</div>

</div>

<div class="panel-body">

<p>Please select the family member from the provided drop-down and then provide additional details.</p>

<table class="table table-bordered" id="table1" style="margin:1px">

<thead>

<tr>

<th style="text-align:center;background-color:lightgray;color:black"><strong> Member:</strong></th>

<th style="text-align:center;background-color:lightgray;color:black"><strong> Diagnosis:</strong></th>

<th style="text-align:center;background-color:lightgray;color:black"><strong>Date of Diagnosis:</strong></th>

<th style="text-align:center;background-color:lightgray;color:black"><strong>Comments:</strong></th>

<th style="text-align:center;background-color:lightgray;color:black"></th>

</tr>

</thead>

<tr>

<td>

<select class="form-control" id="ddlparents">

<option selected="selected" value="Mother">Mother</option>

<option value="Father">Father</option>

<option value="Brother">Brother</option>

<option value="Sister">Sister</option>

<option value="Maternal GarndFather">Maternal GarndFather</option>

<option value="Maternal GarndMother">Maternal GarndMother</option>

<option value="Maternal Aunt">Maternal Aunt</option>

<option value="Maternal Uncle">Maternal Uncle</option>

<option value="Parental GarndFather">Parental GarndFather</option>

<option value="Parental GarndMother">Parental GarndMother</option>

<option value="Parental Aunt">Parental Aunt</option>

<option value="Parental Uncle">Parental Uncle</option>

</select>

</td>

<td>

<input type="text" class="form-control" id="txtmelanoma" name="txtmelanoma" value="Melanoma" />

</td>

<td>

<input type="text" class="form-control PasteDisable" data-field="datetime" readonly="true" id="date1" />

</td>

<td>

<input type="text" class="form-control" id="txtpcomment1" name="txtpcomment"/>

</td>

<td>

<button type="button" class="close" data-dismiss="tr" id="btnremove" aria-label="Close" style="color:red;opacity:10"><span aria-hidden="true">&times;</span></button>

</td>

</tr>

<tr>

<td>

<select class="form-control" id="Select1">

<option value="Mother">Mother</option>

<option selected="selected" value="Father">Father</option>

<option value="Brother">Brother</option>

<option value="Sister">Sister</option>

<option value="Maternal GarndFather">Maternal GarndFather</option>

<option value="Maternal GarndMother">Maternal GarndMother</option>

<option value="Maternal Aunt">Maternal Aunt</option>

<option value="Maternal Uncle">Maternal Uncle</option>

<option value="Parental GarndFather">Parental GarndFather</option>

<option value="Parental GarndMother">Parental GarndMother</option>

<option value="Parental Aunt">Parental Aunt</option>

<option value="Parental Uncle">Parental Uncle</option>

</select>

</td>

<td>

<input type="text" class="form-control" id="Text1" name="txtmelanoma" value="High Blood Pressure" />

</td>

<td>

<input type="text" class="form-control PasteDisable" data-field="datetime" readonly="true" id="date2" name="date2" />

</td>

<td>

<input type="text" class="form-control" id="txtpcomment2" name="txtpcomment"/>

</td>

<td>

<button type="button" class="close" data-dismiss="tr" id="btnremove1" aria-label="Close" style="color:red;opacity:10"><span aria-hidden="true">&times;</span></button>

</td>

</tr>

</table>

<button type="button" id="btnadd" name="btnadd" class="btn btn-primary btn-xs" >Add</button>

<hr />

</div>

</div>

</div>

</div>

<button id="btnexit" type="submit" class="btn btn-default pull-right" name="btnexit">Exit</button>

</div>

<script>

var x = 1;

$(document).ready(function () {

$("#dtBox").DateTimePicker();

$("#btnadd").click(function () {

x = x + 1;

var text = '<tr>'

+ '<td>'

+ '<select class="form-control" id="Select1">'

+ '<option value="Mother">Mother</option>'

+ '<option value="Father">Father</option>'

+ '<option value="Brother">Brother</option>'

+ '<option value="Sister">Sister</option>'

+ '<option value="Maternal GarndFather">Maternal GarndFather</option>'

+ '<option value="Maternal GarndMother">Maternal GarndMother</option>'

+' <option value="Maternal Aunt">Maternal Aunt</option>'

+ '<option value="Maternal Uncle">Maternal Uncle</option>'

+ '<option value="Parental GarndFather">Parental GarndFather</option>'

+ '<option value="Parental GarndMother">Parental GarndMother</option>'

+ '<option value="Parental Aunt">Parental Aunt</option>'

+ '<option value="Parental Uncle">Parental Uncle</option>'

+ '</select>'

+ '</td>'

+ '<td>'

+ '<input type="text" class="form-control" id="Text1" name="txtmelanoma" />'

+ '</td>'

+ '<td>'

+ '<input type="text" class="form-control PasteDisable" data-field="datetime" readonly="true" id="date2" name="date2" />'

+ '</td>'

+ '<td>'

+ '<input type="text" class="form-control" id="txtpcomment" name="txtpcomment"/>'

+ '</td>'

+ '<td>'

+ '<button type="button" class="close" data-dismiss="tr" id="btnremove" aria-label="Close" style="color:red;opacity:10"><span aria-hidden="true">&times;</span></button>'

+ '</td>'

+ '</tr>'

$("#table1").append(text);

})

$("#table1").on('click', "#btnremove", function () {

$(this).closest('tr').remove();

});

$("#btnadd1").click(function () {

x = x + 1;

var data = '<tr>'

+ '<td>'

+ '<input type="text" class="form-control" id="txtdiagsys" name="txtdiagsys" />'

+ '</td>'

+ '<td>'

+ '<input type="text" class="form-control PasteDisable" data-field="datetime" readonly="true" id="date1" name="date2" />'

+ '</td>'

+ '<td>'

+ '<input type="text" class="form-control" id="txtvcomments" name="txtvcomments"/>'

+ '</td>'

+ '<td>'

+ '<button type="button" class="close" data-dismiss="tr" id="btnremove1" aria-label="Close" style="color:red;opacity:10"><span aria-hidden="true">&times;</span></button>'

+ '</td>'

+ '</tr>'

$("#table2").append(data);

})

$("#table2").on('click', "#btnremove1", function () {

$(this).closest('tr').remove();

});

});

</script>