我正在从数据库创建自动填充文本字段并动态添加和删除行。但剧本中存在问题。当我添加新行时，脚本不起作用。
这是我的HTML文件。
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<body>
<script>
$(window).load(function() {
$(".loader").fadeOut("fast");
);
</script>
<div class="my-form">
<form name="form" action="demo.php" method="post">
<input type="hidden" value="1" id="rows" name="rows" class="rows"/>
<p class="text-box" id="input_1">
<table><tr>
<td width="180px">item</td>
<td width="180px">description</td>
<td width="180px">price</td>
<td width="180px">quantity</td>
<td>total</td>
</tr></table>
<input type='text' id='item' name='item'/>
<input type='text' id='desc' name='description'/>
<input name="boxa1" id="boxa1" class="boxa" type="text" value="" />
<input name="boxb1" id="boxb1" class="boxb" type="text" value="" />
= <input name="answer1" id="answer1" class="answer" type="text" value="" />
<a class="add-box" href="#"><img src="images/add.png"></a>
</p>
<input type="submit" name="sub" id="sub">
</form>
</div>
Grand Total: <span class="GrandTotal">0.00</span><br/><br/>
这是我的ajax-php文件名（ajax.php）。此文件有助于从数据库中获取数据，而无需一次又一次刷新页面。这项工作正常
<?php
require_once 'config.php';
if($_GET['type'] == 'product'){
$result = mysql_query("SELECT name FROM product where name LIKE '".strtoupper($_GET['name_startsWith'])."%'");
$data = array();
while ($row = mysql_fetch_array($result)) {
array_push($data, $row['name']);
}
echo json_encode($data);
}
if($_GET['type'] == 'product_table'){
$row_num = $_GET['row_num'];
$result = mysql_query("SELECT name, description, cost_price FROM product where name LIKE '".strtoupper($_GET['name_startsWith'])."%'");
$data = array();
while ($row = mysql_fetch_array($result)) {
$name = $row['name'].'|'.$row['description'].'|'.$row['cost_price'].'|'.$row_num;
array_push($data, $name);
}
echo json_encode($data);
}
?>
这是我的用于创建自动填充文本字段的脚本文件。
<script>
// Autopopulate
$('#item').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajax.php',
dataType: "json",
data: {
name_startsWith: request.term,
type: 'product'
},
success: function( data ) {
response( $.map( data, function( item ) {
return {
label: item,
value: item
}
}));
}
});
},
autoFocus: true,
minLength: 0
});
$('#item').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajax.php',
dataType: "json",
data: {
name_startsWith: request.term,
type: 'product_table',
row_num : 1
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[0],
value: code[0],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
console.log(names[0], names[1], names[2]);
$('#item').val(names[0]);
$('#desc').val(names[1]);
$('#boxa1').val(names[2]);
}
});
// End of autopoplate
//创建有限的文本字段
此脚本用于创建和删除动态行
jQuery(document).ready(function($){
$('.my-form .add-box').click(function(){
var n = $('.text-box').length + 1;
if( 1000 < n ) {
alert('Stop it!');
return false;
}
// adding new rows of textfield
var box_html = $('<p class="text-box" id="input_'+ n +'"> <input type="text" id="item' + n + '" name="item ' + n + '"/> <input type="text" id="desc' + n + '" name="description' + n + '"/> <input type="text" name="boxa' + n + '" value="" id="boxa' + n + '" class="boxa" /> <input type="text" name="boxb' + n + '" value="" id="boxb' + n + '" class="boxb" /> = <input name="answer' + n + '" class="answer" id="answer' + n + '" value="" /> <a href="#" class="remove-box"><img src="images/remove.png"></a></p>');
jQuery('#my-form').append(box_html);
box_html.hide();
$('.my-form p.text-box:last').after(box_html);
box_html.fadeIn('fast');
答案 0 :(得分：-1)
$("#item").autocomplete({source:function(t,a){$.ajax({url:"ajax.php",dataType:"json",data:{name_startsWith:t.term,type:"product"},success:function(t){a($.map(t,function(t){return{label:t,value:t}}))}})},autoFocus:!0,minLength:0}),$("#item").autocomplete({source:function(t,a){$.ajax({url:"ajax.php",dataType:"json",data:{name_startsWith:t.term,type:"product_table",row_num:1},success:function(t){a($.map(t,function(t){var a=t.split("|");return{label:a[0],value:a[0],data:t}}))}})},autoFocus:!0,minLength:0,select:function(t,a){var e=a.item.data.split("|");console.log(e[0],e[1],e[2]),$("#item").val(e[0]),$("#desc").val(e[1]),$("#boxa1").val(e[2])}}),jQuery(document).ready(function(t){function a(){var a=0;t(".my-form .text-box .answer").each(function(){a+=Number(t(this).val())}),t(".GrandTotal").text(""),t(".GrandTotal").text(a)}t(".my-form .add-box").click(function(){var a=t(".text-box").length+1;if(a>1e3)return alert("Stop it!"),!1;var e=t('<p class="text-box" id="input_'+a+'"> <input type="text" id="item'+a+'" name="item '+a+'"/> <input type="text" id="desc'+a+'" name="description'+a+'"/> <input type="text" name="boxa'+a+'" value="" id="boxa'+a+'" class="boxa" /> <input type="text" name="boxb'+a+'" value="" id="boxb'+a+'" class="boxb" /> = <input name="answer'+a+'" class="answer" id="answer'+a+'" value="" /> <a href="#" class="remove-box"><img src="images/remove.png"></a></p>');return jQuery("#my-form").append(e),e.hide(),t(".my-form p.text-box:last").after(e),e.fadeIn("fast"),!1}),t(".my-form").on("click",".remove-box",function(){return t(this).parent().css("background-color",""),t(this).parent().fadeOut("fast",function(){t(this).remove(),t(".box-number").each(function(a){t(this).text(a+1)}),a();var e=t("#rows").val();--e,t("#rows").val(e)}),!1}),t(function(){t(".add-box").click(function(){var a=t("#rows").val();++a,t("#rows").val(a)})}),t(".my-form").on("input",".boxb",function(){var e=t(this).val();e*=t(this).siblings(".boxa").val(),t(this).siblings(".answer").val(e),a()}),t(".my-form").on("change",".boxa",function(){var e=t(this).val();e*=t(this).siblings(".boxb").val(),t(this).siblings(".answer").val(e),a()})});