我有通过数据库生成的动态表https://jsfiddle.net/vc5dbtw9/8/。
这只是一个小例子,实际表要大得多,并且随着时间的推移会增大(这就是为什么我需要动态的原因)。
一些字段是必填字段,因此我在数据库中创建了一个列,您可以看到隐藏标签(IDKarakteristike)的值是True和False。
我需要某种jQuery来动态检查行中的标签是对还是错,并使同一行中的文本框在单击按钮时强制填写(取决于标签)。
有人可以帮助我使用jQuery吗?
我需要这样的东西,单击按钮时发出警告。
$('#myButton').on('click', function () {
$("input").prop('required',true);
});
谢谢!
答案 0 :(得分:1)
这是转到上一个TD并找到第二个跨度的方法(或者您可以将类选择器用于IDKarakteristike)并检查其值以确定:
$(document).ready(function(){
$("input").each(function(){
if ($($this).closest('td').prev('td').find("span").eq(1).html()=='true'){
$(this).prop('required',true);
}
})
})
答案 1 :(得分:1)
这是工作示例。找到跨度,仅获取具有布尔值的跨度,为每个跨度找到父行,然后在该行中找到表单元素:
$(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"/>
答案 2 :(得分:1)
我更新了小提琴:https://jsfiddle.net/vc5dbtw9/56/
使用form标签环绕您的html代码,并转换按钮以提交并放置以下脚本,您很高兴!
$('#myButton').on('click', function () {
$('#MainContent_gvKarakteristike tr').each(function(e){
var mandatory = $(this).find('.IDKarakteristike:last').text().toLowerCase();
if(mandatory == 'true')
{
$(this).find('input,select').prop('required','required');
}
else
{
$(this).find('input,select').prop('required',false);
}
});
});