我有动态表https://jsfiddle.net/vc5dbtw9/8/这是通过我的数据库生成的。
这只是一个小例子，实际的表格要大得多，并且会随着时间的推移而增大(这就是为什么它需要动态)。
某些字段需要强制填写，因此我在数据库中创建了一个列，如您所见，生成的隐藏标签 (IDKarakteristike) 的值为 True 和 False。
我需要某种 jQuery 来动态检查行中的标签是 true 还是 false，并使同一行中的文本框在单击按钮时强制填写或不填写(取决于标签)。
有人可以帮我使用 jQuery 吗？
我需要这样的东西，单击按钮时发出警告。
$('#myButton').on('click', function () {
$("input").prop('required',true);
});
提前致谢!
最佳答案
这是工作示例。查找跨度，仅获取具有 bool 值的跨度，对于每个跨度找到父行，然后找到该行中的表单元素:
$(function () {
$("#myButton").on("click", function () {
// Loop all span elements with target class
$(".IDKarakteristike").each(function (i, el) {
// Skip spans which text is actually a number
if (!isNaN($(el).text())) {
return;
}
// Get the value
var val = $(el).text().toUpperCase();
var isRequired = (val === "TRUE") ? true :
(val === "FALSE") ? false : undefined;
// Mark the textbox with required attribute
if (isRequired) {
// Find the form element
var target = $(el).parents("tr").find("input,select");
// Mark it with required attribute
target.prop("required", true);
// Just some styling
target.css("border", "1px solid red");
}
});
})
});.IDKarakteristike {
display:none !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table cellspacing="0" cellpadding="4" id="MainContent_gvKarakteristike" style="color:#333333;border-collapse:collapse;">
<tr style="color:White;background-color:#507CD1;font-weight:bold;">
<th scope="col">Characteristic</th><th scope="col"> </th><th scope="col">Description</th>
</tr><tr style="background-color:#EFF3FB;">
<td>
<span id="MainContent_gvKarakteristike_Karakteristike_0" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">PFD Total value</span>
</td><td>
<span id="MainContent_gvKarakteristike_Label_0" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">1</span>
<span id="MainContent_gvKarakteristike_Label1_0" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">True</span>
</td><td>
<input name="ctl00$MainContent$gvKarakteristike$ctl02$txtBoxOpis" type="text" maxlength="4" id="MainContent_gvKarakteristike_txtBoxOpis_0" margin-Left="100px" style="font-family:Georgia;height:30px;width:150px;" />
</td>
</tr><tr style="background-color:White;">
<td>
<span id="MainContent_gvKarakteristike_Karakteristike_1" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">PFD Wear </span>
</td><td>
<span id="MainContent_gvKarakteristike_Label_1" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">2</span>
<span id="MainContent_gvKarakteristike_Label1_1" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">False</span>
</td><td>
<input name="ctl00$MainContent$gvKarakteristike$ctl03$txtBoxOpis" type="text" maxlength="6" id="MainContent_gvKarakteristike_txtBoxOpis_1" margin-Left="100px" style="font-family:Georgia;height:30px;width:150px;" />
</td>
</tr><tr style="background-color:#EFF3FB;">
<td>
<span id="MainContent_gvKarakteristike_Karakteristike_2" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">PFD Weight g/m²</span>
</td><td>
<span id="MainContent_gvKarakteristike_Label_2" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">3</span>
<span id="MainContent_gvKarakteristike_Label1_2" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">False</span>
</td><td>
<input name="ctl00$MainContent$gvKarakteristike$ctl04$txtBoxOpis" type="text" maxlength="8" id="MainContent_gvKarakteristike_txtBoxOpis_2" margin-Left="100px" style="font-family:Georgia;height:30px;width:150px;" />
</td>
</tr><tr style="background-color:White;">
<td>
<span id="MainContent_gvKarakteristike_Karakteristike_3" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">PFD Surface
</span>
</td><td>
<span id="MainContent_gvKarakteristike_Label_3" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">5</span>
<span id="MainContent_gvKarakteristike_Label1_3" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">True</span>
</td><td>
<select name="ctl00$MainContent$gvKarakteristike$ctl05$ddlOpis" id="MainContent_gvKarakteristike_ddlOpis_3" margin-Left="100px" style="font-family:Georgia;height:35px;width:161px;">
<option selected="selected" value=""></option>
<option value="1">Proteco
</option>
<option value="2">Proteco Oil
</option>
<option value="3">Classic
</option>
<option value="4">Natura
</option>
<option value="5">No Surface t</option>
</select>
</td>
</tr><tr style="background-color:#EFF3FB;">
<td>
<span id="MainContent_gvKarakteristike_Karakteristike_4" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">PFD product
</span>
</td><td>
<span id="MainContent_gvKarakteristike_Label_4" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">9</span>
<span id="MainContent_gvKarakteristike_Label1_4" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">True</span>
</td><td>
<input name="ctl00$MainContent$gvKarakteristike$ctl06$txtBoxOpis" type="text" maxlength="60" id="MainContent_gvKarakteristike_txtBoxOpis_4" margin-Left="100px" style="font-family:Georgia;height:30px;width:150px;" />
</td>
</tr>
</table>
</div>
<input type="button" class="button" id="myButton" value="Save"/>关于javascript - 单击按钮时填写必填字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51279320/