我有一个表格,我可以在其中使用 javascript 添加行。我在每一行中都有一个选择框。我正在为选择框调用 onchange。它仅适用于第一行,不适用于通过 javascript 添加的行。请帮忙。
这是带有添加和删除行按钮的 html 表格:
<INPUT type="button" class="btn btn-primary" value="Add Row" onclick="addRow('payment_table')" />
<INPUT class="btn btn-primary" type="button" value="Delete Row" onclick="deleteRow('payment_table')" />
<TABLE class="table table-hover dataTable table-striped width-full" data-plugin="dataTable" id="payment_table">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD>
<SELECT name="product" class="form-control product" id="product" >
<option value="">Select Product</option>
<?php
$sql="select products_name,products_amount,products_tmp_id from slv_products where products_status <> '0'";
$results = $connect->runQuery($sql);
foreach($results as $result) {
?>
<option value="<?php echo $result['products_tmp_id']; ?>"><?php echo $result['products_name']; ?></option>
<?php } ?>
</SELECT>
</TD>
<TD><input class="form-control col-sm-2" type="text" name="quantity" id="quantity" placeholder="Quantity"></TD>
<TD><input class="form-control" type="text" name="amount" id="amount" placeholder="Amount" readonly></TD>
</TR>
</TABLE>
这是添加和删除行和 ajax 的脚本:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
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) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
$(document).ready(function() {
$('.product').change(function() {
var id = $(this).val();
$.ajax({
type: "POST",
url: "ajax.php",
data: {
id : id
},
success: function(data) {
if(data){
$("#amount").val(data);
$("#quantity").val("1");
}
},
error : function(data){
alert("Error occured !!");
}
});
});
});
这是 ajax.php :
<?php
include('/opt/lampp/htdocs/slv/includes/config.php');
$id = $_POST['id'];
$query = "SELECT products_amount FROM slv_products WHERE products_tmp_id='$id'"; //expecting one row
$results = $connect->runQuery($query);
foreach($results as $result){
echo $result['products_amount'];
}
?>
最佳答案
你的 ajax 代码应该是这样的:
$('body').on('change', '.product', function() {
var _that = $(this);
var id = _that.val();
$.ajax({
type: "POST",
url: "ajax.php",
data: {
id : id
},
success: function(data) {
if(data){
_that.parents("tr").find(".amount").val(data);
_that.parents("tr").find(".quantity").val("1");
}
},
error : function(data){
alert("Error occured !!");
}
});
});
是因为html元素的绑定(bind)。如果 html 是动态添加的,则不能直接将其与 jQuery 绑定(bind)。
关于javascript - ajax post 不工作 php mysql,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40132624/