├── README.md
└── bank.html


/README.md:
--------------------------------------------------------------------------------
1 | # divanov11-table-edit-frontend-complete-blank


--------------------------------------------------------------------------------
/bank.html:
--------------------------------------------------------------------------------
  1 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  2 | 
  3 | <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  4 | 
  5 | <style>
  6 | 	.hidden{
  7 |         display:none;
  8 |     }
  9 | 
 10 |     .result{
 11 |     	max-width:80px; 
 12 |     }
 13 | 
 14 | </style>
 15 | 
 16 | <div class="row">
 17 | 
 18 | 	<div class="col-md-4"></div>
 19 | 
 20 | 	<div class="col-md-4">
 21 | 
 22 | 		<div class="card card-body">
 23 | 
 24 | 			<!-- Form Wrapper & Button -->
 25 | 			<button class="btn btn-sm btn-primary" id="add-test">Add Test</button>
 26 | 			<div class="form-wrapper hidden">
 27 | 				<select class="form-control" id="test-name">
 28 | 					<option>----------</option>
 29 | 					<option>Flash Point</option>
 30 | 					<option>Water</option>
 31 | 					<option>Distillation</option>
 32 | 				</select>
 33 | 				<input class="form-control" type="text" id="test-result">
 34 | 				<button class="btn btn-sm btn-info" id="create-test">Add</button>
 35 | 			</div>
 36 | 
 37 | 			<!-- Data Table -->
 38 | 			<table class="table table-dark">
 39 | 			  <thead>
 40 | 			    <tr>
 41 | 			      <th scope="col">Test</th>
 42 | 			      <th scope="col">Result</th>
 43 | 
 44 | 			    </tr>
 45 | 			  </thead>
 46 | 			  <tbody id="tests-table">
 47 | 			    
 48 | 			  </tbody>
 49 | 			</table>
 50 | 
 51 | 		</div>
 52 | 
 53 | 	</div>
 54 | 
 55 | 	<div class="col-md-4"></div>
 56 | </div>
 57 | 
 58 | 
 59 | <script>
 60 | 
 61 | 	$('#add-test').on('click', function(){
 62 | 	})
 63 | 
 64 | 
 65 | 	$('#test-result').on('keyup', function(){
 66 | 
 67 | 	})
 68 | 
 69 | 	$('#test-name').on('change', function(){
 70 | 	})
 71 | 
 72 | 	$('#create-test').on('click', function(){
 73 | 
 74 | 	})
 75 | 
 76 | 	var tests = [
 77 | 		{'name':'Distillation 50%', 'id':'1', 'result':"43"},
 78 | 	    {'name':'Flash Point', 'id':'2', 'result':"61"},
 79 | 	    {'name':'Water By Karl Fischer', 'id':'3', 'result':"24"},
 80 | 	]
 81 | 
 82 | 
 83 | 	for (var i in tests){
 84 | 		addRow(tests[i])
 85 | 	}
 86 | 
 87 | 	function addRow(obj){
 88 | 		var row = `<tr scope="row" class="test-row-${obj.id}">
 89 | 	    			   <td>${obj.name}</td>
 90 | 	                   <td>${obj.result}</td>
 91 | 	                   <td>
 92 | 	                   		<button class="btn btn-sm btn-danger">Delete</button>
 93 | 	                   		<button class="btn btn-sm btn-info">Save</button>
 94 | 	                   		<!--
 95 | 	                   		<button class="btn btn-sm btn-danger">Cancel</button>
 96 | 	                   		<button class="btn btn-sm btn-primary">Confirm</button>
 97 | 	                   		-->
 98 | 	                   </td>
 99 | 	    		   </tr>`
100 | 		$('#tests-table').append(row)
101 | 
102 | 	}
103 | 
104 | 	function editResult(){
105 | 
106 | 	}
107 | 
108 | 	function saveUpdate(){
109 | 	}
110 | 
111 | 
112 | 
113 | 	function deleteTest(){
114 | 
115 | 	}
116 | 
117 | 	function cancelDeletion(){
118 | 
119 | 	}
120 | 
121 | 	function confirmDeletion(){
122 | 
123 | 	}
124 | </script>


--------------------------------------------------------------------------------