一次遮羞布的处理：使用js仿照“ctrl + f”完成对页面元素的搜索

令人悲伤的需求

这是我刚来公司后的第一个维护项目，大家都不愿意接的烫手山芋，原因就是 总改需求！！！还不给钱！！！

本来说好添加一个功能，数据库添加一张表，最后只需要一个展示界面，之后操作依赖于此界面；时隔半年，客户说想加几个搜索功能...

主要原因是新添加的表中根本没这些字段，如果添加功能将非常复杂，还会影响以前的功能。

我可以利用浏览器本身自带的搜索

代码如下，直接复制粘贴到展示界面中即可：

代码语言：javascript复制

<script language="JavaScript"> 
<!--  
var DOM = (document.getElementById) ? 1 : 0; 
var NS4 = (document.layers) ? 1 : 0; 
var IE4 = 0; 
if (document.all) 
{ 
     IE4 = 1; 
     DOM = 0; 
}

var win = window;    
var n    = 0;

function findIt() { 
     if (document.getElementById("searchstr").value != "") 
         findInPage(document.getElementById("searchstr").value); 
}


function findInPage(str) { 
var txt, i, found;

if (str == "") 
     return false;

if (DOM) 
{ 
     win.find(str, false, true); 
     return true; 
}

if (NS4) { 
     if (!win.find(str)) 
         while(win.find(str, false, true)) 
             n  ; 
     else 
         n  ;

     if (n == 0) 
         alert("未找到指定内容."); 
}

if (IE4) { 
     txt = win.document.body.createTextRange();

     for (i = 0; i <= n && (found = txt.findText(str)) != false; i  ) { 
         txt.moveStart("character", 1); 
         txt.moveEnd("textedit"); 
     }

if (found) { 
     txt.moveStart("character", -1); 
     txt.findText(str); 
     txt.select(); 
     txt.scrollIntoView(); 
     n  ; 
} 
else { 
     if (n > 0) { 
         n = 0; 
         findInPage(str); 
     } 
     else 
         alert("未找到指定内容."); 
     } 
}

return false; 
} 
// --> 
</script>
<br> 
<div align="center"> 
    <table width="90%" border="0" align="center" cellspacing="0" bgcolor="#EFF7FF" style='border:1px #8CA5B5 solid;' id="zoom"> 
      <tr bgcolor="#DBEAF5">  
        <td height="50" style='border-bottom:1px #8CA5B5 solid;'> 
          <div align="center"><font class="s" color="#104A7B"><b>帮   助</b></div> 
          <div align="center"> 
          <table width="98%">
            <tr><td align="left"> 
              <input type="text" id="searchstr" name="searchstr" class="textbox" size="10"> 
              <input type="button" value="页内查找" onclick="javascript:findIt();" class="sbttn">      
            </td></tr>
          </table>
    这里是你的展示界面（数据）
    </table>

结语

感谢万能的google，记住，有问题，找百度

数据库 txt 浏览器 数据 搜索

0 人点赞