根据jQuery结果和表行ID突出显示表行

时间:2018-05-22 13:41:26

标签: jquery html

我有一个脚本可以返回一个策略编号列表。

另一方面,我有一个表,动态填充表行id的行作为策略号。

我试图突出显示id等于脚本中获取的策略编号的所有行。

代码

<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>

选择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]返回政策号码。

突出显示

.highlight {
    background-color: #ccc;
}

尝试将突出显示类调用为 $("tr:contains(splitPolicyData[i])").addClass("highlight"); 但是徒劳无功无法突出显示。

PS :在控制台中验证。

我有这个结果:

  

政策:1234

     

政策:5678

有人可以指导我任何故障吗?应该做些什么来改变它?

突出显示条件更新: 我在侧面有一个删除图标,将在突出显示记录时使用。此删除将删除整行。删除时的行应删除突出显示选项,而不是使突出显示仍可用于其连续记录。

1 个答案:

答案 0 :(得分:1)

我认为&#34; splitPolicyData [i]&#34;是您的问题,请改用以下代码

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

它的处理&#34; splitPolicyData [i]&#34;作为搜索条件,而不是您可能从splitPolicyData [i]获得的值。

PS:将选择器用作

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

而不是

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

希望有所帮助