提供兩種方式的更新。我希望它能像您預(yù)期的結(jié)果一樣工作（但仍然像我在評論中建議的那樣，建議考慮使用不“設(shè)計相關(guān)”的技術(shù)來管理此問題的另一種方法。例如 Javascript 對象或 LocalStorage...）
let restricts = ["bags", "kg"];
function hideQuantity(e) {
if (restricts.indexOf(e.target.value) > -1) {
e.target.closest("tr").querySelector(".item_quantity").setAttribute("disabled", "disabled");
} else {
e.target.closest("tr").querySelector(".item_quantity").removeAttribute("disabled", "disabled");
}
}
$(document).ready(function(){
$(document).on('click', '.add', function () {
var html = '';
html += '<tr>';
html += '<td><select onclick="hideQuantity(event)" name="item_unit[]" id="item_unit" class="form-control item_unit">';
html += '<option value="">Select Unit</option><option value="bags">Bags</option><option value="inch">Inch</option><option value="kg">Kg</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>';
html += '</select></td>';
html += '<td><input type="text" name="item_name[]"" class="form-control item_name" /></td>';
html += '<td><input type="text" name="item_quantity[]"" class="form-control item_quantity" /></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
});
$(document).on('click', '.remove', function(){
$(this).closest('tr').remove();
});
$(document).on('change keyup focusout','.item_quantity',function(){
//I called it in french to avoid confusion with value val...
var valeur =$(this).val();
var unitreference= $(this).parents("tr").find("td:first select.item_unit").val();
$('.item_unit').each(function(){
if($(this).val()==unitreference ){
$(this).parents("tr").find("td:eq(2) input.item_quantity").val(valeur).attr('disabled', 'disabled');
}
});
$(this).removeAttr("disabled");
})
$(document).on('change','.item_unit',function(){
//Update using the unit selector
var selectedUnit =$(this).val();
//Here we look for the Quantity field being used as Referece
var quantRef= $('select option[value='+selectedUnit+']:selected').parents("tr").find("td:eq(2) input.item_quantity:not(:disabled)").val()
//console.log(selectedUnit)
//console.log(quantRef)
if(quantRef){
$('.item_unit').each(function(){
if($(this).val()==selectedUnit ){
$(this).parents("tr").find("td:eq(2) input.item_quantity").val(quantRef).attr('disabled', 'disabled');
}
});
}
})
$('#insert_form').on('submit', function(event){
event.preventDefault();
var error = '';
$('.item_name').each(function(){
var count = 1;
if($(this).val() == '') {
error += "<p>Enter Item Name at "+count+" Row</p>";
return false;
}
count = count + 1;
});
$('.item_quantity').each(function(){
var count = 1;
if($(this).val() == '') {
error += "<p>Enter Item Quantity at "+count+" Row</p>";
return false;
}
count = count + 1;
});
$('.item_unit').each(function(){
var count = 1;
if($(this).val() == '') {
error += "<p>Select Unit at "+count+" Row</p>";
return false;
}
count = count + 1;
});
var form_data = $(this).serialize();
if(error == '') {
$.ajax({
url:"insert.php",
method:"POST",
data:form_data,
success:function(data) {
if(data == 'ok') {
$('#item_table').find("tr:gt(0)").remove();
$('#error').html('<div class="alert alert-success">Item Details Saved</div>');
}
}
});
} else {
$('#error').html('<div class="alert alert-danger">'+error+'</div>');
}
});
});
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form method="post" id="insert_form">
<div class="table-repsonsive">
<span id="error"></span>
<table class="table table-bordered" id="item_table">
<tr>
<th>Unit</th>
<th>Name</th>
<th>Quantity</th>
<th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
</tr>
</table>
<div align="center">
<input type="submit" name="submit" class="btn btn-info" value="Insert" />
</div>
</div>
</form>
</div>
</body>
</html>
PS：抱歉我很忙:) 一個建議：如果可能的話，您可以在單元格表上添加一些類，以便您可以使用closest() 優(yōu)化您的代碼。
