我有一个HTML表，该表具有“抵押类型”列作为可编辑字段，用户可以在其中选择下拉列表中的值，并在可用的输入字段中输入一些文本。
按揭类型下拉列表中显示的默认值为“自动”。当用户在任何行（例如，第一行和第四行）中输入一些数据并单击“提交”按钮时，我正在清除字段并显示从后端获取的数据。它按预期工作。
问题，我面临的是用户单击 GetData 按钮。我正在清除用户输入的输入，并显示从后端获取的数据，但是正在清除 默认值，在“抵押类型”下拉列表中显示，对于所有字段，该值应为“自动” ，但我从数据库中获得的值除外（ var mortageType -如第一个表格的两行。）
$('.mortgageType').val(''); //clearing all the dropdown values and showing blank as the code suggests..
另一个问题是word-wrap: break-word;对这些列不起作用。当值长时，我不想扩展列的大小，相反，我想做word-wrap: break-word;。但是在我的代码中，当用户单击GetData按钮时，第一行的“状态”字段中的值很长，并且正在扩展该列。
我试图在样式属性中使用下面的CSS，这是行不通的。
<div class="cloneX10 indField" id="status2" style="word-wrap: break-word;"></div>
演示代码（也在Plnkr.co上）：
function submitData() {
var flag = true;
$('#loanTable input[type="text"]').val('');
$('.mortgageType').val(''); //to clear the dropdown value
$('.order').val('');
var enablingFlag = true;
if (flag) {
//values from backend
var mortageType = [{
"code": "Home",
"description": "Home"
}, {
"code": "Car",
"description": "Car"
}];
var loanNum = [{
"code": "23432",
"description": "23432"
}, {
"code": "12123",
"description": "12123"
}];
var status = [{
"code": "Approved",
"description": "Approved"
}, {
"code": "Pending, need more documents",
"description": "Pending, need more documents"
}];
var j = 0;
//iterate and show the jsonData in the table2 when user click on submit button
for (var i = 0; i < mortageType.length; i++) {
j = j + 1;
document.getElementById("mortageType" + j).value = mortageType[i].code;
document.getElementById("loanNum" + j).innerText = loanNum[i].code;
document.getElementById("status" + j).innerText = status[i].code;
if (loanNum[i].code == null || mortageType[i].code == null || status[i].code == null) {
console.log("row has null value");
$('#status' + j).parent().parent().css({
'border': 'red'
});
}
}
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="loanTable" id="loanTable" border="1">
<tbody>
<tr>
<th> <label for="show"><span name="3765" maxlength="1"class="message">Year</span></label> </th>
<th> <label for="show"><span name="568" maxlength="1" class="message">Mortgage Type</span>
<span name="496" maxlength="1" class="message"></span>
</label>
</th>
<th> <label for="show"><span name="3702" maxlength="1" class="message">Loan Num</span></label> </th>
<th> <label for="show"><span name="2366" maxlength="1" class="message">Status</span></label> </th>
<th> <label for="show"><span name="179" maxlength="1" class="message">Comments</span></label> </th>
</tr>
<tr>
<td>
<label for="show" class="ddownlabels"></label>
<select id="year" name="year" disabled>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</td>
<td>
<div class="cloneX10 indField">
<label for="show" class="ddownlabels"></label>
<select id="mortageType1" name="mortageType1" class="mortgageType">
<option value="Auto">Auto</option>
<option value="Home">Home</option>
<option value="Car">Car</option>
</select>
<input name="ord1" id="ord1" class="order">
</div>
</td>
<td>
<div class="cloneX10 indField" id="loanNum1"></div>
</td>
<td>
<div class="cloneX10 indField" id="status1" style="word-wrap: break-word;"></div>
</td>
<td>
<div class="cloneX10 indField" id="comments1"></div>
</td>
</tr>
<!--Second row-->
<tr>
<td>
<label for="show" class="ddownlabels"></label>
<select id="year" name="year" disabled>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</td>
<td>
<div class="cloneX10 indField">
<label for="show" class="ddownlabels"></label>
<select id="mortageType2" name="mortageType2" class="mortgageType">
<option value="Auto">Auto</option>
<option value="Home">Home</option>
<option value="Car">Car</option>
</select>
<input name="ord2" id="ord2" class="order">
</div>
</td>
<td>
<div class="cloneX10 indField" id="loanNum2"></div>
</td>
<td>
<div class="cloneX10 indField" id="status2" style="word-wrap: break-word;"></div>
</td>
<td>
<div class="cloneX10 indField" id="comments2"></div>
</td>
</tr>
<!--Third Row-->
<tr>
<td>
<label for="show" class="ddownlabels"></label>
<select id="year" name="year" disabled>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</td>
<td>
<div class="cloneX10 indField">
<label for="show" class="ddownlabels"></label>
<select id="mortageType3" name="mortageType3" class="mortgageType">
<option value="Auto">Auto</option>
<option value="Home">Home</option>
<option value="Car">Car</option>
</select>
<input name="ord3" id="ord3" class="order">
</div>
</td>
<td>
<div class="cloneX10 indField" id="loanNum3"></div>
</td>
<td>
<div class="cloneX10 indField" id="status3" style="word-wrap: break-word;"></div>
</td>
<td>
<div class="cloneX10 indField" id="comments3"></div>
</td>
</tr>
<!--Fourth Row-->
<tr>
<td>
<label for="show" class="ddownlabels"></label>
<select id="year" name="year" disabled>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</td>
<td>
<div class="cloneX10 indField">
<label for="show" class="ddownlabels"></label>
<select id="mortageType3" name="mortageType4" class="mortgageType">
<option value="Auto">Auto</option>
<option value="Home">Home</option>
<option value="Car">Car</option>
</select>
<input name="ord4" id="ord4" class="order">
</div>
</td>
<td>
<div class="cloneX10 indField" id="loanNum4"></div>
</td>
<td>
<div class="cloneX10 indField" id="status4"></div>
</td>
<td>
<div class="cloneX10 indField" id="comments4"></div>
</td>
</tr>
<!--Fifth Row-->
<tr>
<td>
<label for="show" class="ddownlabels"></label>
<select id="year" name="year" disabled>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</td>
<td>
<div class="cloneX10 indField">
<label for="show" class="ddownlabels"></label>
<select id="mortageType3" name="mortageType5" class="mortgageType">
<option value="Auto">Auto</option>
<option value="Home">Home</option>
<option value="Car">Car</option>
</select>
<input name="ord5" id="ord5" class="order">
</div>
</td>
<td>
<div class="cloneX10 indField" id="loanNum5"></div>
</td>
<td>
<div class="cloneX10 indField" id="status5"></div>
</td>
<td>
<div class="cloneX10 indField" id="comments5"></div>
</td>
</tr>
</tbody>
</table><br>
<input type="submit" value="GetData" onclick="submitData()">
答案 0 :(得分：1)
printf替换为$('.mortgageType').val(''); $('.mortgageType').val('Auto');用于这些style="max-width:100px;"标签答案 1 :(得分：0)
不需要清除所有选择元素的值。因此，一个简单的解决方案是注释以下代码行：
JS：
//$('.mortgageType').val('');
// or something simple like line below
$('.mortgageType').val('Auto'); //So you'll set "Auto" to all selet elements and in the loop you'll change them based on what database returns.
要防止扩展列，您可以使用以下解决方案：
HTML / CSS：
<table class="loanTable" id="loanTable" border="1" style="table-layout:fixed;">
...
<td><div class="cloneX10 indField" id="status2" style="white-space: nowrap;overflow: hidden;"></div></td>
或者您可以使用overflow-x: scroll;而不是overflow: hidden;来使滚动条读取扩展内容。检查此链接：Plnkr.co
建议。如果您还有其他问题，或者您认为这不是您的答案，请在下面的评论部分中让我问。
另一个防止列扩展的解决方案，在此线程中回答： Display limit for table column