使用jQuery将ID动态分配给当前表行

Question

我需要使用jQuery函数将ID分配给表中特定行（满分为5）。

我设法设法将CSS应用于测试目的，但它不仅适用于当前行，还适用于所有行

 $("#AdditionalTenent").find("tr").css("background-color", "red");

表结构

<table class="table-bordered">
     <thead>
       <tr id="AdditionalTenentHeader">
                                <th>Student UWL ID</th>
                                <th>Title</th>
                                <th>First Name</th>
                                <th>Middle Name</th>
                                <th>Last Name</th>
                                <th>Actions</th>
                            </tr>
    </thead>
    <tbody>
                            <tr class="AdditionalTenentRecord">
                                <td><input type="text" value="" name="listedStudentUWLID" id="listedStudentUWLID" class="form-control additionalTententUWLID"></td>
                                <td><input type="text" value="" name="listedStudentTitle" id="listedStudentTitle" class="form-control listedStudentTitle"></td>
                                <td><input type="text" value="" name="listedStudentFirstName" id="listedStudentFirstName" class="form-control listedStudentFirstName"></td>
                                <td><input type="text" value="" name="listedStudentMiddleName" id="listedStudentMiddleName" class="form-control listedStudentMiddleName"></td>
                                <td><input type="text" value="" name="listedStudentLastName" id="listedStudentLastName" class="form-control listedStudentLastName"></td>
                                <td><a class="DeleteEntryInline_Icon DeleteAdditionalTenentEntry" href="#"></a></td>
                            </tr>

                            <tr class="AdditionalTenentRecord">
                                <td><input type="text" value="" name="listedStudentUWLID" id="listedStudentUWLID" class="form-control additionalTententUWLID"></td>
                                <td><input type="text" value="" name="listedStudentTitle" id="listedStudentTitle" class="form-control listedStudentTitle"></td>
                                <td><input type="text" value="" name="listedStudentFirstName" id="listedStudentFirstName" class="form-control listedStudentFirstName"></td>
                                <td><input type="text" value="" name="listedStudentMiddleName" id="listedStudentMiddleName" class="form-control listedStudentMiddleName"></td>
                                <td><input type="text" value="" name="listedStudentLastName" id="listedStudentLastName" class="form-control listedStudentLastName"></td>
                                <td><a class="DeleteEntryInline_Icon DeleteAdditionalTenentEntry" href="#"></a></td>
                            </tr>

                            <tr class="AdditionalTenentRecord">
                                <td><input type="text" value="" name="listedStudentUWLID" id="listedStudentUWLID" class="form-control additionalTententUWLID"></td>
                                <td><input type="text" value="" name="listedStudentTitle" id="listedStudentTitle" class="form-control listedStudentTitle"></td>
                                <td><input type="text" value="" name="listedStudentFirstName" id="listedStudentFirstName" class="form-control listedStudentFirstName"></td>
                                <td><input type="text" value="" name="listedStudentMiddleName" id="listedStudentMiddleName" class="form-control listedStudentMiddleName"></td>
                                <td><input type="text" value="" name="listedStudentLastName" id="listedStudentLastName" class="form-control listedStudentLastName"></td>
                                <td><a class="DeleteEntryInline_Icon DeleteAdditionalTenentEntry" href="#"></a></td>
                            </tr>

         </tbody>
  </table>

我试过以下jQuery脚本，但它仍将css应用于表中的所有记录，而不是$（this）！

   $("#AdditionalTenent").find(".AdditionalTenentRecord").closest("tr").css("background-color", "yellow");

javaScript代码

 $(".additionalTententUWLID").on("change", function () {

    var StudentUWLID = $(this).val();

    $.ajax({
        url: '@Url.Action("GetStudentRecordByID", "StudentProfile")',
            type: "POST",
            dataType: "JSON",
            data: { _GivenStudentUWLID: StudentUWLID },
            cache: false
        }).done(function (data, textStatus, jqXHR) {

            if (data.RecordStatus == "NotAvailable")
            {
                $(this).MyMessageDialog({
                    _messageBlockID: "_StatusMessage",
                    _messageContent: "<div class='warningMessage'> <h4>Given Student Cannot Be Enter As Additional Tenant.</h4> <br/> Student Need to Have their Profile Completed On Student Village Portal Before Can Be Added As Additional Tenant Within The Tendency Form! <br/><br/> Or Enter Correct Student UWL ID "+"</div>",
                    _messageBlockWidth: "400px"
                });
            }
            else if(data.RecordStatus=="recordFound")
            {
                alert(data.Response);

                var paraedData = JSON.parse(data.Response);

               // alert(paraedData.Title + "   " + paraedData.FirstName);

                //  $("#AdditionalTenent").find("tr").css("background-color", "red");

                $("#AdditionalTenent").find(".AdditionalTenentRecord").closest("tr").css("background-color", "yellow");
              ???????????????????
               //I need to apply css or ID to row only in use so that in following line I can set values to text field only in single row NOT all of them 
         $("#AdditionalTenent").find(".listedStudentTitle").val(paraedData.Title);
                $("#AdditionalTenent").find(".listedStudentFirstName").val(paraedData.FirstName);
                $("#AdditionalTenent").find(".listedStudentMiddleName").val(paraedData.MiddleName);
                $("#AdditionalTenent").find(".listedStudentLastName").val(paraedData.LastName);

            }

        }).fail(function (jqXHR, textStatus, errorThrown) {

          alert("error");
        });

    });

Answer 1

我假设您正在使用jQuery click事件，如果是这种情况，则可以使用：

$(this).closest('tr').remove();

Answer 2

 $(".additionalTententUWLID").on("change", function () {

    var StudentUWLID = $(this).val();

    $(this).attr('id', StudentUWLID);

    $.ajax({............my rest of code

并成功回应

 $("#" + StudentUWLID).closest('tr').css('background-color', 'red');

 $("#" + StudentUWLID).closest('tr').find(".listedStudentTitle").val(paraedData.Title);
  $("#" + StudentUWLID).closest('tr').find(".listedStudentFirstName").val(paraedData.FirstName);
  $("#" + StudentUWLID).closest('tr').find(".listedStudentMiddleName").val(paraedData.MiddleName);
  $("#" + StudentUWLID).closest('tr').find(".listedStudentLastName").val(paraedData.LastName);