如何使用 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"

jsfiddle

这是一个有点粗糙的示例,但看看它是否对您有帮助。它是带有输入字段的静态 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>