党娟博客

js实现table查找数据行高亮显示,并跳转到指定行

输入框中输入行名称,表格实现自动跳转并高亮该行。

<script language="JavaScript">
var tr;
function gorow()
{
  var aa= document.getElementsByName('aa')[0].value;
  if(aa !=""){
   for(i=0;i<t1.rows.length;i++){
    t1.rows[i].bgColor='';
   }
   //document.getElementById(aa).bgColor='white';
   tr=document.getElementById(aa).parentElement;//返回该列的所在行tr
   tr.bgColor='red';
    window.location.href="#"+aa;
    }
}
</script>

<div id="divDetail" style="overFlow-y:scroll; width:250px;height: 200px;">
    <table id="t1" width="100" border onClick="select(event.srcElement);">
        <tr><td id="row1">row1<a name="row1"></td><td id="行1">行1<a name="行1"></td></tr>
        <tr><td id="row2">row2<a name="row2"></td><td id="行2">行2<a name="行2"></td></tr>
        <tr><td id="row3">row3<a name="row3"></td><td id="行3">行3<a name="行3"></td></tr>
        <tr><td id="row4">row4<a name="row4"></td><td id="行4">行4<a name="行4"></td></tr>
        <tr><td id="row5">row5<a name="row5"></td><td id="行5">行5<a name="行5"></td></tr>
        <tr><td id="row10">row10<a name="row10"></td><td id="行10">行10<a name="行10"></td></tr>
        <tr><td id="row20">row20<a name="row20"></td><td id="行20">行20<a name="行20"></td></tr>
        <tr><td id="row30">row30<a name="row30"></td><td id="行30">行30<a name="行30"></td></tr>
        <tr><td id="row40">row40<a name="row40"></td><td id="行40">行40<a name="行40"></td></tr>
        <tr><td id="row50">row50<a name="row50"></td><td id="行50">行50<a name="行50"></td></tr>
    </table>
<div>
<input type="text" name="aa"/><input type="button" value="Go" onClick="gorow()"/>

 


发表我的评论

Hi,您需要填写昵称和邮箱!

  • 必填项