0
Ich habe ein paar Dinge gelöst, und es funktioniert jetzt, dank dieser Seite haben sie mir in einer anderen Sache geholfen. Nun, das ist, wie ich den Code bekam, und die Autocomplete funktioniert, aber nur ich kann nur mit denen, die geladen werden, wenn die Seite angezeigt wird, wenn ich die erste eingeben, legt das Autocomplete-Skript die Beschreibung, Menge und Preis von der Code, den ich eingegeben habe, anstatt nur die erste Zeile oder die Zeile, in die ich den Code einfügen möchte. Das ist jetzt mein Code.Autocomplete mit dynamischer Tabelle Jquery und Javascript
$(document).ready(function() {
//this is added just to pre-populate some rows
addRow2('dataTable');
$(".chkall").click(function() {
if ($(".chkall").is(':checked')) {
$("#dataTable input[type=checkbox]").each(function() {
$(this).prop("checked", true);
});
} else {
$("#dataTable input[type=checkbox]").each(function() {
$(this).prop("checked", false);
});
}
});
$('.get_total, .g_total').click(function(e) {
g_total = 0;
$('input.total').each(function() {
g_total += eval($(this).val());
});
console.log(g_total);
$('.g_total').html(g_total);
})
$('input.total').on('change', function() {
g_total = 0;
$('input.total').each(function() {
g_total += eval($(this).val());
$('.g_total').html(g_total);
})
})
})
function grandTotal() {
g_total = 0;
$('input.total').each(function() {
g_total += eval($(this).val());
$('.g_total').html(g_total);
})
}
function addRow2(tableid) {
var table = $('#' + tableid);
rowCount = table.children().length;
//console.log(table.children().length);
newrow = '<tr class="dataRow"><td><input type="checkbox" name="chkbox[]" class="remove"></td><td><input class="codigo" type="text" name="codigo[]"></td><td><input type="text" class="descripcion" name="descripcion[]"></td><td><input type="text" step="any" class="cantidad" min="1" onchange="calc2($(this))" name="cantidad[]"></td><td><input type="text" step="any" min="0" value="0" class="precio" name="precio[]" onchange="calc2($(this));"></td><td><input type="text" value="0" class="total" name="total[]"></td></tr>';
table.append(newrow);
$("#dataTable input[id^='codigo']").autocomplete({
source:'buscarcompra.php',
minLength:1
});
$("#dataTable input[id^='codigo']").focusout(function(){
$.ajax({
url:'producto.php',
type:'POST',
dataType:'json',
data:{ codigo: $("#dataTable input[id^='codigo']").val()}
}).done(function(respuesta){
$("#dataTable input[name^='descripcion']").val(respuesta.descripcion);
$("#dataTable input[name^='precio']").val(respuesta.precio);
});
});
}
function calc2(_row) {
row = _row.closest('.dataRow');
//console.log();
//
qty = row.find('.cantidad').val();
price = row.find('.precio').val();
total = parseFloat(qty) * parseFloat(price);
console.log('qty:' + qty + ' * price:' + price + ' = ' + total);
row.closest('.dataRow').find('.total').val(total);
grandTotal();
}
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) {
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
}.g_total {
width: 100px;
background-color: #ccc;
height: 20px;
display: inline-block;
float: right;
}
.cantidad,
.precio,
.total {
/*
height: 50px;
width: 40px;*/
text-align: center;
}
.cantidad {
width: 84px;
}
.codigo,
.descripcion {
width: 54px
}
.precio,
.total {
width: 121px;
}<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css" />
<h1>CARRITO DE COMPRAS</h1>
<INPUT type="button" value="Agregar Producto" onClick="addRow2('dataTable')" />
<INPUT type="button" value="Borrar Producto" onClick="deleteRow('dataTable')" />
<input type="button" class="get_total" value="Get Total" />
<form id="myform" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">
<TABLE border="1">
<thead>
<tr>
<th>
<input type="checkbox" class="chkall">
</th>
<th class="codigo">CODIGO</th>
<th class="descripcion">DESCRIPCION</th>
<th class="cantidad">CANTIDAD</th>
<th class="precio">PRECIO</th>
<th class='total'>TOTAL</th>
</tr>
</thead>
<tbody id="dataTable">
</tbody>
</TABLE>
</div>
</br>
<div class="g_total">
</span>
Versuchst du '.autocomplete()' zu jeder dynamisch erstellt '' Element zu befestigen? – guest271314
Ich möchte eine automatische Vervollständigung für jeden haben. Weil ich die Beschreibung und Menge und den Preis des Produktes haben will, das ich will. (Die Berechnungsmethode funktioniert gut). Ich weiß nur nicht, wie ich es implementieren werde :( –