我有一个包含4行的HTML表，其中禁用了“订单ID”和“产品评论”列，用户可以在其他列中输入数据并提交。当用户输入数据并单击“提交”按钮时，我得到一个JSON对象作为返回值，该对象正在迭代并显示在表中。
我这里有两个需要帮助的路障。
当用户单击“提交”按钮时，将在submitData()所在的地方调用jsonData函数，该函数被迭代并显示在表中，但是用我的代码Product1和Product2列（它们是下拉列表）没有显示数据。
另一个问题是，当用户单击“提交”按钮并获取数据并显示在表中时，我要在“产品注释”列中添加一个 为可编辑（启用），所有其他列均处于禁用模式。
代码演示：https://plnkr.co/edit/CEAYKI1SGuobosye1Pqk?p=preview
以下是我尝试的示例代码：
//populate dropdown with the value
function populateSelect() {
var ids = [{
"pid": "laptop",
"des": "laptop"
}, {
"pid": "Mobile",
"des": "Mobile"
}, {
"pid": "IPAD mini.",
"des": "IPAD mini."
}]
var productDropdown1 = $(".product1");
var productDropdown2 = $(".product2");
$.each(ids, function(index, value) {
$("<option />").text(value.des).val(value.pid).appendTo(productDropdown1);
$("<option />").text(value.des).val(value.pid).appendTo(productDropdown2);
});
$("select").change(function() {
var row = $(this).closest("tr");
var product1_drop = $('.product1', row).val();
var product2_drop = $('.product2', row).val();
var descValue = $('input[name="description"]', row).val();
if (product1_drop && product2_drop)
validate(product1_drop, product2_drop, descValue);
});
$('input[name="description"]').on('input', function(e) {
var row = $(this).closest("tr");
var product1_drop = $('.product1', row).val();
var product2_drop = $('.product2', row).val();
console.log("-inut -product1_drop----- " + product1_drop);
if (product1_drop && product2_drop)
validate(product1_drop, product2_drop, $(this).val());
});
}
function validate(prod1, prod2, desc) {
if (desc && prod1 === prod2) {
alert('Product1 and Product2 cannot have same value');
}
}
function submitData() {
var flag = true;
if (flag) {
//after getting the values from backend hide the table1 and show table2
var jsonData = [{
"oid": "1023",
"Product1": "laptop",
"description": "Silver color",
"product2": "IPAD Mini",
"comments": "user comments row1",
"productComments": "Product comments row1"
},
{
"oid": "1024",
"Product1": "Mobile",
"description": "Samsung",
"product2": "IPAD Mini",
"comments": "user comments row2",
"productComments": "product comments row2"
}
];
//iterate and show the jsonData in the table2 when user click on submit button
$.each(jsonData, function(key, val) {
$('#productTable tr:eq(' + [key + 1] + ') td:eq(0) input').val(val.oid);
$('#productTable tr:eq(' + [key + 1] + ') td:eq(1) select').val(val.product1);
$('#productTable tr:eq(' + [key + 1] + ') td:eq(2) input').val(val.description);
$('#productTable tr:eq(' + [key + 1] + ') td:eq(3) select').val(val.product2);
$('#productTable tr:eq(' + [key + 1] + ') td:eq(4) input').val(val.comments);
$('#productTable tr:eq(' + [key + 1] + ') td:eq(5) input').val(val.productComments);
});
}
}
$(document).ready(function() {
populateSelect();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="productTable" border="1">
<tr>
<th>Order ID</th>
<th>Product1</th>
<th>Description</th>
<th>Product2</th>
<th>Comments</th>
<th>Product Comments</th>
</tr>
<tr>
<td><input type="text" name="orderNum" value="" id="orderNum1" disabled></td>
<td>
<select class="product1" id="prod1">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="description" value="">
</td>
<td>
<select class="product2" id="product2">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<input type="text" name="productComments" value="" disabled>
</td>
</tr>
<tr>
<td><input type="text" name="orderNum" value="" id="orderNum2" disabled></td>
<td>
<select class="product1" id="prod2">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="description" value="">
</td>
<td>
<select class="product2">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<input type="text" name="productComments" value="" disabled>
</td>
</tr>
<tr>
<td><input type="text" name="orderNum" value="" id="orderNum3" disabled></td>
<td>
<select class="product1" id="prod3">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="description" value="">
</td>
<td>
<select class="product2">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<input type="text" name="productComments" value="" disabled>
</td>
</tr>
<tr>
<td><input type="text" name="orderNum" value="" id="orderNum4" disabled></td>
<td>
<select class="product1" id="prod4">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="description" value="">
</td>
<td>
<select class="product2">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<input type="text" name="productComments" value="" disabled>
</td>
</tr>
</table> <br>
<input type="submit" value="submit" onclick="submitData()">
</body>
</html>
---编辑---- 我面临的另一个问题是，当用户单击“提交”按钮时得到的jsonData是否具有任何null值，我想在该行中显示数据，但以红色显示该行，并且不想禁用字段，以便用户可以再次输入数据。
示例：
var jsonData = [{
"oid": "1023",
"product1": "laptop",
"description": "Silver color",
"product2": "Mobile",
"comments":"user comments row1",
"productComments":"Product comments row1"
},
{
"oid": null,
"product1": "Mobile",
"description": "Samsung",
"product2": "laptop",
"comments":"user comments row2",
"productComments":"product comments row2"
}
];
在上面的jsonData中，第二行值oid为null，因此我想显示第二行以红色突出显示，并且不要禁用这些字段。并重置/清除用户在单击“提交”按钮之前输入的所有输入。
代码i，用于在单击“提交”按钮之前重置用户输入的值：
$('#productTable input[type="text"]').val('');
$('.product1').val('');
答案 0 :(得分：1)
对于product1，它工作正常。对于product2，“ product2”：“ IPAD Mini”中的语法错误应该是“ product2”：“ IPAD Mini”。末尾带有点。
要更改字段的启用，请执行以下操作：
$('#productTable input, #productTable select').attr("disabled", "disabled");
$('#productTable tr ').each(function(){
$('td:eq(2) input', this).removeAttr("disabled");
});