sai vital

sai vital

  • NA
  • 191
  • 2k

Adding DateTime in Table row Dynamically

Jun 20 2016 6:47 AM
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>
 

Answers (4)