Highlighting table rows based on jQuery result and table row ID

Question

I have a script that returns a list of policy numbers.

On the other side, I have a table that dynamically populates rows with table row id as the policy number.

I'm trying to highlight all the rows with an id equal to the policy number obtained in the script.

Code :

<table id="pasRecordTable" st-table="display_records" st-safe-src="employees"
   ng-init="getData()" ng-show="employees.length"
   class="table table-striped" ng-controller="uploadFileController">
   <thead>
      <tr>
         <th>Policy Number</th>
         <th width="100px">First Name</th>
         <th st-sort="salary">Last Name</th>
         <th>Error Description</th>
         <th>Validated/Corrected in PAS</th>
         <th>Note</th>
         <th>Action</th>
      </tr>
   </thead>
   <tbody>
      <tr st-select-row="row" st-select-mode="multiple"
         ng-repeat="row in display_records" id="{{row.PolicyNumber}}">
         <td>{{row.PolicyNumber}}</td>
         <td>{{row.FirstName}}</td>
         <td>{{row.LastName}}</td>
         <td>{{row.ErrorDescription}}</td>
         <td>{{row.PASValidated}}</td>
         <td>{{row.Note}}</td>
         <td><button type="button" class="btn btn-danger"
            ng-click="deletRecord(row.PolicyNumber)">
            <i class="glyphicon glyphicon-trash"> </i>
            </button>
         </td>
      </tr>
      <tr>
         <td></td>
         <td></td>
         <td style="border-bottom: 1px solid #ddd;"></td>
         <td style="border-bottom: 1px solid #ddd;">
            <button type="submit" class="btn btn-submit"
               ng-click="submit(employees)">Submit</button>
         </td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <td colspan="5" class="text-center">
            <div st-pagination="" st-items-by-page="itemsByPage"></div>
         </td>
      </tr>
   </tfoot>
</table>

On choosing Submit :

$scope.submit = function(employees) {
    $http({
        'url': '/updateOverride',
        'method': 'POST',
        'headers': {
            'Content-Type': 'application/json'
        },
        'data': $scope.employees
    }).then(function(employees) {
        $scope.insertResult = employees.data;
        var controllerMessage = $scope.insertResult;
        var messageKey = 'result';
        var result = controllerMessage[messageKey];
        console.log("controllerMessage : " + controllerMessage);
        if (result == "success") {} else {
            if (controllerMessage['data'] != null) {
                var dataKey = 'data';
                var policyData = controllerMessage[dataKey];
                var splitPolicyData = policyData.split(',');
                console.log("splitPolicyData : " + splitPolicyData);
                var arrayLength = splitPolicyData.length;
                for (var i = 0; i < arrayLength; i++) {
                    console.log("Policies : " + splitPolicyData[i]);
                    $("tr:contains(splitPolicyData[i])").addClass("highlight");
                }
            }
        }

        $("#alert_" + result).show()
    })
};

splitPolicyData[i] returns the policy number.

Highlight :

.highlight {
    background-color: #ccc;
}

Tried calling the highlight class as $("tr:contains(splitPolicyData[i])").addClass("highlight"); but in vain. Highlighting could not be done.

PS : Validated in console.

I have this result:

Policies : 1234

Policies : 5678

Can someone guide me on any glitch? What should be changed to make this work?

Highlight condition update : I have a delete icon at the side, which will be used when a record is highlighted. This delete will delete the entire row. The row, on deletion should remove the highlight option, rather than making the highlight still available for its successive record.

Answer 1

I think "splitPolicyData[i]" is your problem, use the following code instead

  for (var i = 0; i < arrayLength; i++) {
                    console.log("Policies : " + splitPolicyData[i]);
                    $("tr:contains("+splitPolicyData[i]+")").addClass("highlight");
                }

Its treating "splitPolicyData[i]" as search criteria ainstead of the value which you might get from splitPolicyData[i].

PS: use selector as

$("tr[id*='"+splitPolicyData[i]+"']")

instead of

 $("tr:contains("+splitPolicyData[i]+")")

Hope it helps