Table行按条件搜索后跳转到相应行

最新推荐文章于 2024-12-24 16:24:45 发布

欧巴酱

最新推荐文章于 2024-12-24 16:24:45 发布

阅读量397

点赞数

本文链接：https://blog.youkuaiyun.com/qq_36894527/article/details/107364966

版权

<input id="ToTrData" maxlength="50" style="width: 160px;height:30px;border:1px solid #ddd" placeholder="输入名称后，回车搜索" />

 <div class="daliy_sp" id="InfoTable">
                                <table border="0" cellpadding="0" cellspacing="0" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>门店ID</th>
                                            <th>商品ID</th>
                                            <th>商品名称</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr id="{{item.SPECS_ID}}">
                                            <td>{{item.KHID}}</td>
                                            <td>{{item.KHID}}</td>
                                            <td>{{item.KHID}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                        </div>


//回车事件
        $("#ToTrData").keypress(function (event) {
            ;
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if (keycode == '13') {
                let colname = $("#ToTrData").val();
                let infoid = "";
                if ($scope.NewSPDA.length > 0) {
                    for (var i = 0; i < $scope.NewSPDA.length; i++) {
                        if ($scope.NewSPDA[i].SNAME.toUpperCase().indexOf(colname.toUpperCase()) >= 0) {
                            infoid = $scope.NewSPDA[i].SPECS_ID;
                            break;
                        }
                    }
                    if (infoid != "") {
                        //动画效果
                        $('#InfoTable').animate({
                            scrollTop: $('#InfoTable').find($('#' + infoid)).offset().top - $('#InfoTable').offset().top + $('#InfoTable').scrollTop()
                        }, 500);//滑动到指定位置
                        $('#' + infoid).siblings("tr").css("background", "");
                        $('#' + infoid).css("background", "rgb(181, 238, 255)");
                    } else {
                        $('#InfoTable').find("tr").css("background", "");
                        layer.msg("暂未搜索到相关列，请重新输入", { icon: 13 });
                    }
                }
            }
        })

$scope.NewSPDA：数组集合