JSFiddle - React, Tailwind, and code Playground

by dauruk0512

HTML

<table class="table table-bordered table-hover">
					<thead>
						<tr>
							<th width="2%"><input id="check_all" class="formcontrol" type="checkbox"/></th>
							<th width="12%">Kode Barang</th>
							<th width="15%">Nama Barang</th>
							<th width="8%">Jumlah</th>
							<th width="15%">Harga</th>
							<th width="10%">Stock</th>
							<th width="15%">Total</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td><input class="case" type="checkbox"/></td>
							<td>
							<input type="text" data-type="id_barang" name="itemNo[]" id="itemNo_1" class="form-control autocomplete_txt" autocomplete="off" value="2">
							<input type="hidden"  name="kode[]" id="kode_1" value="2">
							</td>
							<td><input type="text" data-type="nama_barang" name="itemName[]" id="itemName_1" class="form-control autocomplete_txt" autocomplete="off" readonly value="2"></td>
							<td><input type="text"  name="quantity1[]" id="quantity1_1" class="form-control autocomplete_txt stock" autocomplete="off" readonly value="2"></td>
							<td><input type="number" name="price[]" id="price_1" class="form-control changesNo" autocomplete="off" onKeyPress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" pattern="^\d+(\.|\,)\d{2}$" value="2"></td>
							<td><input type="number" name="quantity[]" id="quantity_1" class="form-control changesNo quantity" autocomplete="off" onKeyPress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" value="2" ></td>
							<td><input type="number" name="total[]" id="total_1" class="form-control totalLinePrice" autocomplete="off" onKeyPress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" readonly  pattern="^\d+(\.|\,)\d{2}$" value="2"></td>
						</tr>




						<tr>
							<td><input class="case" type="checkbox"/></td>
							<td>
							<input type="text" data-type="id_barang" name="itemNo[]" id="itemNo_2" class="form-control autocomplete_txt" autocomplete="off"...

JavaScript

var aRow = $("table tbody tr:first").clone()
var i=$('table tr').length;
$(".addmore").on('click',function(){
		$('table').append(aRow.clone());
	i++;
});


//to check all checkboxes
$(document).on('change','#check_all',function(){
	$('input[class=case]:checkbox').prop("checked", $(this).is(':checked'));
});

//deletes the selected table rows
$(".delete").on('click', function() {
	$('.case:checkbox:checked').parents("tr").remove();
	$('#check_all').prop("checked", false); 
	calculateTotal();
});

//autocomplete script
$(document).on('focus','.autocomplete_txt',function(){
	type = $(this).data('type');
	
	if(type =='id_barang' )autoTypeNo=0;
	if(type =='nama_barang' )autoTypeNo=1; 		
	
	$(this).autocomplete({
		source: function( request, response ) {
			$.ajax({
				url : 'http://localhost/code_cipta/admin/product',
				dataType: "json",
				method: 'post',
				data: {
				   name_startsWith: request.term,
				   type: type
				},
				 success: function( data ) {
					response( $.map( data, function( item ) {
					 	var code = item.split("|");
						return {
							label: code[autoTypeNo],
							value: code[autoTypeNo],
							data : item
						}
					}));
				}
			});
		},
		autoFocus: true,	      	
		minLength: 0,
		select: function( event, ui ) {
			
			
			var names = ui.item.data.split("|");						
			id_arr = $(this).attr('id');
	  		id = id_arr.split("_");
			
			//taruh di id item no
			$('#itemNo_'+id[1]).val(names[0]);
			
			//taruh di id itemname
			$('#itemName_'+id[1]).val(names[1]);
			
			$('#StockName_'+id[1]).val(names[2]);
			
			
			
			//taruh di id quantity dengan array indeks 1
			$('#quantity_'+id[1]).val(1);
			//taruh di id harga dari database
			$('#price_'+id[1]).val(1);
			//taruh di id total
			
			quantity = $('#quantity_'+id[1]).val();
		
			price = $('#price_'+id[1]).val();
			
			$('#total_'+id[1]).val( quantity * price);
			
			calculateTotal();
		}		      	
	});
});

//price change
$(document).on('change keyup...