【发布时间】：2016-12-07 19:44:55
【问题描述】：
我已经解决了一些问题，现在它可以工作了，感谢这个页面，他们在另一件事上帮助了我。现在，这就是我获得代码的方式，并且自动完成工作，但只有我可以只使用显示页面时加载的那些，如果我输入第一个，自动完成脚本会放置描述、数量和价格我输入的代码，而不是第一行，或者我要放入代码的行。这是我现在的代码。
$(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>【问题讨论】：
-
您是否尝试将
.autocomplete()附加到每个动态创建的<input>元素？ -
我想为每个人设置一个自动完成功能。因为我想要我想要的产品的描述、数量和价格。 （计算方法工作正常）。我只是不知道我将如何实现它:(
标签： javascript php jquery html autocomplete