如何使用 jquery 检查一行是否被选中以及特定单元格是否为空?
how to check if a row is checked and a specific cell is empty using jquery?
基本上当用户在我的 MVC 3 应用程序中单击提交时。
我想使用 jquery 检查所选的任何行(通过复选框选择)是否在该行的特定单元格中具有任何值。
并且不显示警报 mgs 或验证错误。
粗略的代码尝试:
$("#MultiSubBtn").click(function () {
if ((':checkbox').is(':checked') && ('td').find("attBtn").isempty())
alert("there is a cert missing");
});
上面的 MultiSubBtn 是我的 Submit btn 上的 id。
以及我要查询的单元格 ID a
关于 jquery 仍在学习,这里是完整的 html 页面。
我删除了一些元素以减小页面大小。
<div id="tabs-1" style="position:relative; left:-12%;">
@using (Html.BeginForm("SentMultipleCalsToCustomer", "CalibrationViewer", FormMethod.Post))
{
@* This is the table that contains a single page of the paginated table of recent calibrations *@
<table id="all-calibrations" class="grid tracker-grid" style="width:77%">
<colgroup>
<col class ="" style="width:11%">
<col class="workno-data" style="width:13%">
<col class="equipmentId-data" style="width:8%">
<col class="equipmentDesc-data" style="width:12%">
</colgroup>
<thead>
<tr>
@* ADDED 20/08/2014 *@
<th>Select</th>
<th>Work<br />No.</th>
<th>ID</th>
<th>Description</th>
@* the customer column is only shown for LTS users since customer only see 1 customers data *@
@if (this.User.IsInRole("LTS User Passive"))
{
<th style="width:15%;">Customer</th>
}
<th style="text-align: center; width:15%;">Cert</th>
</tr>
</thead>
<tbody>
@* iterate through each calibration shown on this page *@
@for (int index = 0; index < Model.Count(); index++)
{
@Html.HiddenFor(m => Model.ElementAt(index).CustomerName)
<tr>
@* The work number is a link to the calibration the work no. represents *@
<td><input type="checkbox" name="selectecals" value="@Model.ElementAt(index).Id"/></td>
<td>@Html.ActionLink("WN–" + @Html.DisplayFor(m => Model.ElementAt(index).Id), "Index", "CalibrationViewer", new { id = Model.ElementAt(index).Id }, null)</td>
<td>@Html.DisplayFor(m => Model.ElementAt(index).EquipmentID)</td>
<td>@Html.DisplayFor(m => Model.ElementAt(index).EquipmentDescription)</td>
@* once again only the lts user sees the customer column data *@
@if (this.User.IsInRole("LTS User Passive"))
{
<td>@Html.DisplayFor(m => Model.ElementAt(index).CustomerName)</td>
}
@* if the calibration has an attachment display the name of the file,
else display the Upload button*@
@if (Model.ElementAt(index).CertName != null)
{
<td style="background-color:#33CC00; color:#fff;">@Html.DisplayFor(m => Model.ElementAt(index).CertName)</td>
}
else
{ // style="background-color:#5C9CCC" // ----- to allow for btn
<td id ="attBtn" class="file-uploader-attachment-Class"></td>
}
</tr>
<script type="text/javascript">
var CUST_NAME = '@Model.ElementAt(index).CustomerName';
</script>
}
</tbody>
</table>
if (Model.Count() != 0)
{
<div id="calibrationViewer-rightColumn" style="display:inline-block; position:absolute; top:8.5%; left:80%; width:20%">
@{Html.RenderPartial("StatusForm", InstrumentTracker.Common.Enums.Status.Finished_Calibration);}
<input type="submit" style="width:100%;" class="styledbutton" id="MultiSubBtn" value="Submit" />
<input type="hidden" name="customer" value="@ViewBag.CustomerName" />
<br /> <br />
<button class="styledbutton" style="width:100%;" onclick="window.location.href='/Tracker/Index'">Return to Main Tracker Page</button>
</div>
}
} @*end using form tag*@
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#MultiSubBtn").click(function () {
if ((':checkbox').is(':checked') && ('td').find("attBtn").isempty())
alert("there is a cert missing");
});
function handleCheckbox() {
if ($(this).find(':checkbox').is(':checked')) {
$(this).find('.file-uploader-attachment-Class').removeClass("upload-placeholder-unchecked");
createUploader($(this));
$(this).find('.qq-upload-list').css("margin", "0px")
}
else {
$(this).find('.file-uploader-attachment-Class').addClass("upload-placeholder-unchecked");
$(this).find('.file-uploader-attachment-Class').html($('#myHTML2').html());
}
}
$('tr').each(handleCheckbox);
$('tr').on('click', handleCheckbox);
});
}
});
您将问题表述为 "if any of the rows selected (selected via checkboxes) have any value in a particular cell in that row"
这是一个有点粗糙的示例,但看看它是否对您有帮助。它是带有输入字段的静态 table。如果您在 C 列中输入数据并单击关联的复选框,它会找到该单元格并更改文本颜色。如果单元格为空,它会更改背景颜色。只是为了说明查找单元格并对其内容进行操作。
有很多方法(毫无疑问比这更好的方法)来做这样的事情,但流程应该是一样的。
1) 找到选中的复选框。 var ch = $(":checked");
2) 遍历搜索返回的元素集合 ch.each(function () {}
a) 确定您当前正在查看的行 parentRow = $(this).closest('tr');
(可能是可选的,但我就是这样做的)
b) 找到该行中的单元格 parentRow = $(this).closest('tr');
并根据您自己的标准确定它是否 "empty"。
就我个人而言,我会毫不犹豫地添加 classes 数据元素或任何可以帮助我稍后检索所需内容的内容,因此您会注意到我添加了一个 class该列的 TD 是为了方便起见。
JQUERY
$(".checkbox").on("click", function () {
var ch = $(":checked");
var parentRow;
var cellInQuestion;
ch.each(function () {
parentRow = $(this).closest('tr');
cellInQuestion = $(parentRow).find(".C");
if (cellInQuestion.val() === "") {
cellInQuestion.css("background-color", "red");
} else {
cellInQuestion.css("color", "green");
}
});
});
HTML
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th style="color:green;">C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr class="parentrow">
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" class="C" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="checkbox" class="checkbox" />
</td>
</tr>
<tr class="parentrow">
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" class="C" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="checkbox" class="checkbox" />
</td>
</tr>
<tr class="parentrow">
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" class="C" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="checkbox" class="checkbox" />
</td>
</tr>
</tbody>
</table>
基本上当用户在我的 MVC 3 应用程序中单击提交时。 我想使用 jquery 检查所选的任何行(通过复选框选择)是否在该行的特定单元格中具有任何值。 并且不显示警报 mgs 或验证错误。
粗略的代码尝试:
$("#MultiSubBtn").click(function () {
if ((':checkbox').is(':checked') && ('td').find("attBtn").isempty())
alert("there is a cert missing");
});
上面的 MultiSubBtn 是我的 Submit btn 上的 id。 以及我要查询的单元格 ID a
关于 jquery 仍在学习,这里是完整的 html 页面。 我删除了一些元素以减小页面大小。
<div id="tabs-1" style="position:relative; left:-12%;">
@using (Html.BeginForm("SentMultipleCalsToCustomer", "CalibrationViewer", FormMethod.Post))
{
@* This is the table that contains a single page of the paginated table of recent calibrations *@
<table id="all-calibrations" class="grid tracker-grid" style="width:77%">
<colgroup>
<col class ="" style="width:11%">
<col class="workno-data" style="width:13%">
<col class="equipmentId-data" style="width:8%">
<col class="equipmentDesc-data" style="width:12%">
</colgroup>
<thead>
<tr>
@* ADDED 20/08/2014 *@
<th>Select</th>
<th>Work<br />No.</th>
<th>ID</th>
<th>Description</th>
@* the customer column is only shown for LTS users since customer only see 1 customers data *@
@if (this.User.IsInRole("LTS User Passive"))
{
<th style="width:15%;">Customer</th>
}
<th style="text-align: center; width:15%;">Cert</th>
</tr>
</thead>
<tbody>
@* iterate through each calibration shown on this page *@
@for (int index = 0; index < Model.Count(); index++)
{
@Html.HiddenFor(m => Model.ElementAt(index).CustomerName)
<tr>
@* The work number is a link to the calibration the work no. represents *@
<td><input type="checkbox" name="selectecals" value="@Model.ElementAt(index).Id"/></td>
<td>@Html.ActionLink("WN–" + @Html.DisplayFor(m => Model.ElementAt(index).Id), "Index", "CalibrationViewer", new { id = Model.ElementAt(index).Id }, null)</td>
<td>@Html.DisplayFor(m => Model.ElementAt(index).EquipmentID)</td>
<td>@Html.DisplayFor(m => Model.ElementAt(index).EquipmentDescription)</td>
@* once again only the lts user sees the customer column data *@
@if (this.User.IsInRole("LTS User Passive"))
{
<td>@Html.DisplayFor(m => Model.ElementAt(index).CustomerName)</td>
}
@* if the calibration has an attachment display the name of the file,
else display the Upload button*@
@if (Model.ElementAt(index).CertName != null)
{
<td style="background-color:#33CC00; color:#fff;">@Html.DisplayFor(m => Model.ElementAt(index).CertName)</td>
}
else
{ // style="background-color:#5C9CCC" // ----- to allow for btn
<td id ="attBtn" class="file-uploader-attachment-Class"></td>
}
</tr>
<script type="text/javascript">
var CUST_NAME = '@Model.ElementAt(index).CustomerName';
</script>
}
</tbody>
</table>
if (Model.Count() != 0)
{
<div id="calibrationViewer-rightColumn" style="display:inline-block; position:absolute; top:8.5%; left:80%; width:20%">
@{Html.RenderPartial("StatusForm", InstrumentTracker.Common.Enums.Status.Finished_Calibration);}
<input type="submit" style="width:100%;" class="styledbutton" id="MultiSubBtn" value="Submit" />
<input type="hidden" name="customer" value="@ViewBag.CustomerName" />
<br /> <br />
<button class="styledbutton" style="width:100%;" onclick="window.location.href='/Tracker/Index'">Return to Main Tracker Page</button>
</div>
}
} @*end using form tag*@
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#MultiSubBtn").click(function () {
if ((':checkbox').is(':checked') && ('td').find("attBtn").isempty())
alert("there is a cert missing");
});
function handleCheckbox() {
if ($(this).find(':checkbox').is(':checked')) {
$(this).find('.file-uploader-attachment-Class').removeClass("upload-placeholder-unchecked");
createUploader($(this));
$(this).find('.qq-upload-list').css("margin", "0px")
}
else {
$(this).find('.file-uploader-attachment-Class').addClass("upload-placeholder-unchecked");
$(this).find('.file-uploader-attachment-Class').html($('#myHTML2').html());
}
}
$('tr').each(handleCheckbox);
$('tr').on('click', handleCheckbox);
});
}
});
您将问题表述为 "if any of the rows selected (selected via checkboxes) have any value in a particular cell in that row"
这是一个有点粗糙的示例,但看看它是否对您有帮助。它是带有输入字段的静态 table。如果您在 C 列中输入数据并单击关联的复选框,它会找到该单元格并更改文本颜色。如果单元格为空,它会更改背景颜色。只是为了说明查找单元格并对其内容进行操作。
有很多方法(毫无疑问比这更好的方法)来做这样的事情,但流程应该是一样的。
1) 找到选中的复选框。 var ch = $(":checked");
2) 遍历搜索返回的元素集合 ch.each(function () {}
a) 确定您当前正在查看的行 parentRow = $(this).closest('tr');
(可能是可选的,但我就是这样做的)
b) 找到该行中的单元格 parentRow = $(this).closest('tr');
并根据您自己的标准确定它是否 "empty"。
就我个人而言,我会毫不犹豫地添加 classes 数据元素或任何可以帮助我稍后检索所需内容的内容,因此您会注意到我添加了一个 class该列的 TD 是为了方便起见。
JQUERY
$(".checkbox").on("click", function () {
var ch = $(":checked");
var parentRow;
var cellInQuestion;
ch.each(function () {
parentRow = $(this).closest('tr');
cellInQuestion = $(parentRow).find(".C");
if (cellInQuestion.val() === "") {
cellInQuestion.css("background-color", "red");
} else {
cellInQuestion.css("color", "green");
}
});
});
HTML
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th style="color:green;">C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr class="parentrow">
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" class="C" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="checkbox" class="checkbox" />
</td>
</tr>
<tr class="parentrow">
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" class="C" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="checkbox" class="checkbox" />
</td>
</tr>
<tr class="parentrow">
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" class="C" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="checkbox" class="checkbox" />
</td>
</tr>
</tbody>
</table>