Skip to content

Instantly share code, notes, and snippets.

@karkranikhil

karkranikhil/ticket booking

Last active August 29, 2015 14:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save karkranikhil/f5c995a319e5366f7499 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save karkranikhil/f5c995a319e5366f7499 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ticket booking
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=9,IE=10,IE=11,IE=edge,chrome=1" />
<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.3.0/css/font-awesome.min.css">
<link href="Bootstrap/css/Style.css" rel="stylesheet" />
<style>
body {
font-family: "Lucida Sans", Verdana, sans-serif;
}
h5 {
font-size: 1.625em;
}
h2 {
font-size: 1.375em;
}
#dataTable{
width: 100%;
}
.mb-2{
margin-bottom: 2%;
}
.pt-4{
padding-top:4% !important;
}
#btnConfirm {
text-align: center;
font-size: .925em;
}
.table-bordered>tbody>tr>td{
border:1px solid black ;
}
</style>
</head>
<body style="background-color:olivedrab">
<nav class="navbar navbar-default" id="header">
<div class="container-fluid" style="background-color:white">
<!--Brand and toggle get grouped for better mobile display-->
<div class="row">
<div class="col-xs-6">
<img src="Image/infosys-logo-reverse-white-JPEG.jpg" class="img-circle img-responsive" alt="Infosys Logo" width="204" height="136" />
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-default glyphicon glyphicon-home pull-right" style="width:50px;height:50px;border-radius:50px;background:olivedrab;"></button>
<button type="button" class="btn btn-default glyphicon glyphicon-user pull-right" style="width: 50px; height: 50px; border-radius: 50px; background: olivedrab;"></button>
</div>
</div>
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="col-xs-12">
<h2 style="font-family:Verdana"><span><center>Add Visitor Details<center></span></h2>
</div>
<div class="container" >
<div class="row">
<div class="col-xs-12">
<input type="text" class="form-control mb-2 col-xs-12" placeholder="Employee Id"/>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<input type="text" class="form-control col-xs-12 mb-2 " placeholder="Employee Name"/>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<input type="text" class=" col-xs-12 form-control mb-2" placeholder=" dd/mm/yy"/>
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<select class="form-control" name="Booking time slot" id="listBooking">
<option value="">10:30 A.M to 03:30 P.M</option>
<option value="">11:00 A.M to 04:00 P.M</option>
<option value="">11:30 A.M to 04:30 P.M</option>
<option value="">12:00 P.M to 05:00 P.M</option>
<option value="">1:00 P.M to 06:00 P.M</option>
<option value="">1:30 P.M to 06:00 P.M</option>
<option value="">2:00 P.M to 06:00 P.M</option>
<option value="">2:30 P.M to 06:00 P.M</option>
<option value="">3:00 P.M to 06:00 P.M</option>
<option value="">3:30 P.M to 06:00 P.M</option>
</select>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 pl-0 mb-2">
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
</div>
</div>
</div>
<div class="container table-responsive">
<table class="table table-bordered">
<tr>
<td class="pt-4"><input type="checkbox" name="chk" /></td>
<td>
<label class="control-label"><b>Visitor's Name</b></label>
<input type="text" class="form-control " placeholder=""/>
</td>
<td>
<label class="control-label ">Visitor's Age</label>
<input type="text" class="form-control " placeholder=""/>
</td>
<td>
<label for="Relatn">Relationship:</label>
<select class="form-control" name="Relation" id="Relatn">
<option value="Fa">Father</option>
<option value="Mo">Mother</option>
<option value="Sp">Spouse</option>
<option value="Ch">Child</option>
<option value="Si">Siblings</option>
<option value="In">In-Laws</option>
</select>
</td>
<td>
<label>Remarks</label>
<input type="text" class="form-control" id="Remark" placeholder="" />
</td>
</tr>
</table>
</div> <!--</div>-->
</div>
<div class="col-xs-12" id="btnConfirm" style="margin-top:2px" >
<input type="button" class="btn-default" value="Confirm Booking" />
</div>
<div class="footer pt-4">
<h5><center>Disclaimer:Developed By Infosys Mysore</center></h5>
</div>
</div>
<script language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch (newcell.childNodes[0].type) {
//case "text":
// newcell.childNodes[0].value = "";
// break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null != chkbox && true == chkbox.checked) {
if (rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
}
</script>
<!--</nav>-->
<!--/JavaScript-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment