<script type="text/javascript" src="http://www.clicksun.cn/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>