table 加入搜尋機制且模擬瀏覽器 Ctrl+F 效果

模擬瀏覽器 Ctrl+F 效果 : highlight: JavaScript text higlighting jQuery plugin
下載 .js 後移除 "/* PLEASE DO NOT HOTLINK MY FILES, THANK YOU. */" 開始的內容，避免執行時出現一堆警告訊息

table 加入首列凍結效果 : StickyTableHeaders
配合尋找時可能會因為文字超出視窗範圍時自動捲動，讓首列(含尋找方塊)不要消失

javascript
====
$scope.styling = function () {
            $("table[name=Invoice]").stickyTableHeaders({ fixedOffset: $('.navbar') });
        };
$scope.$watch('searchInvoice', function (newValue, oldValue) {
            $('table[name=Invoice]').removeHighlight();
            if (newValue) $('table[name=Invoice]').highlight(newValue);
            $timeout(function () {
                if ($('table[name=Invoice] .highlight:first').length) {
                    var top = $(window).scrollTop();
                    var bottom = $(window).scrollTop() + $(window).height();
                    var elm_top = $('table[name=Invoice] .highlight:first').offset().top;
                    if (elm_top - top < 100) $(window).scrollTop(top - 100); // 100: navbar height
                    else if (elm_top > bottom - 25) $(window).scrollTop(elm_top - $(window).height() + 25); //25: text height
                }
                },500);
        });

html
====
<table name="Invoice" class="table table-condensed table-bordered table-hover" style="width:980px !important" ng-style="styling()">
                    <thead>
                        <tr class="warning">
                            <th style="width:80px">發票號碼</th>
                            <th style="width:80px">開立日期</th>
                            <th style="width:60px">金額</th>
                            <th style="width:40px">幣別</th>
                            <th style="width:80px">統一編號</th>
                            <th style="width:80px">買方</th>
                            <th style="width:80px">收件人</th>
                            <th style="width:300px">寄送地址</th>
                            <th style="width:80px">單號</th>
                            <th style="width:100px;background-color:unset;border-right:hidden;border-bottom:hidden;border-top:hidden"><input id="searchInvoice" type="text" placeholder="尋找發票..." style="width:100%" ng-model="searchInvoice" /></th>