<script type="text/javascript" src="http://www.rfklfw.com/mis/js/jquery-2.1.1.min.js"></script>

<style type="text/css">

.result{background:yellow;color:red;font-weight:normal;}

.res{background:yellow;color:red;font-weight:bold;}

</style>

<div>

<input type="text" name="key" id="key" placeholder="輸入查找內容" style="width:100px;height:21px;border:1px #AAAAAA solid;border-right:none;border-radius:5px 0px 0px 5px;padding:3px;" onchange="next();"><input type="text" id="search-btn" style="width:50px;height:21px;border:1px #0080FF solid;border-radius:0px 0px 0px 0px;background-color:#0080FF;color:#FFFFFF;text-align:center;cursor:pointer;" value="下一個" onclick="next();" readonly><input type="text" id="s-btn" style="width:50px;height:21px;border:1px #008000 solid;border-left:none;border-radius:0px 5px 5px 0px;background-color:#008000;color:#FFFFFF;text-align:center;cursor:pointer;" value="上一個" onclick="previous();" readonly>

</div>

<div id="myScrollingDiv" style="border:1px solid #AAAAAA;height:370px;width:100%;overflow:auto;">

<table border="0" bordercolor="#AAAAAA" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" width="100%" bgcolor="#FFFFFF" align="center" id="show_detail">

<tr><td>*****</td></tr>

*******表格內容********

<tr><td>*****</td></tr>

</table>

</div>

<script type="text/javascript">

var oldKey = "";

var index = -1;

var pos = new Array();  //用于記錄每個關鍵詞的位置，以方便跳轉

var oldCount = 0;       //記錄搜索到的所有關鍵詞總數

function previous(){

  index--;

  index = index < 0 ? oldCount - 1 : index;

  search();

}

function next(){

  index++;

  //index = index == oldCount ? 0 : index;

  if(index==oldCount){ index = 0 ; }

  search();

}

function search(){

  $(".result").removeClass("res");                       //去除原本的res樣式

  var key = $("#key").val();                             //取key值

  if (!key) {                                            //key為空則退出

    $(".result").each(function () {                     //恢復原始數據

$(this).replaceWith($(this).html());

    });

    oldKey = "";

    return;                                              //key為空則退出

  }

  if (oldKey != key) {                                   //進入重置方法

    index = 0;

    $(".result").each(function () {

$(this).replaceWith($(this).html());

    });

    pos = new Array();

    var regExp = new RegExp(key+'(?!([^<]+)?>)', 'ig');  //正則表達式匹配

    $("td").each(function () {                           //不用.table去遍歷這樣會導致點擊方法失效，直接替換最小單位的td就行

$(this).html($(this).html().replace(regExp, "<span id='result" + index + "' class='result'>" + key + "</span>")); // 高亮操作

    })

    $("#key").val(key);

    oldKey = key;

    $(".result").each(function () {

      if($(this).offset().top == 0){ return; }

    });

    oldCount = $(".result").length;

  }

  $(".result:eq(" + index + ")").addClass("res");              //當前位置關鍵詞改為紅色字體

  $(".result:eq(" + index + ")").attr("id", "result" + index); //當前位置強制更改ID，方便定位跳轉

//window.location.hash="#result" + index;              //強制跳轉到此ID，此方法不適合顯示內容在固定高度DIV中的情形

var father= $("#myScrollingDiv");

var scrollTo= $("#result" + index);

scrollLocation(father, scrollTo);                      //強制跳轉到固定高度DIV中指定ID元素

}

function scrollLocation(father, scrollTo) {

    //father.scrollTop(scrollTo.offset().top - father.offset().top + father.scrollTop());

    // 上面方法無動畫效果，下面方法有動畫滾動效果，建議用下面方法，250為滾動時間，單位ms，可以自行更改：

    father.animate({scrollTop: scrollTo.offset().top - father.offset().top + father.scrollTop() -50}, 250);

};

window.onload=function(){

document.getElementById("key").onkeydown=function(event){

if(event.keyCode==13){next();}

}

}

</script>