在表格内搜索

<html>
<head>
<script type="text/javascript">
function search(){
var keyword = document.getElementById("keyword").value;
keyword = keyword.replace(/^\s*(.*?)\s*$/, "$1");
if(keyword == ""){
alert("请输入关键词");
return false;
} var tab = document.getElementById("tab1");
for(var i = 0; i < tab.rows.length; i++){
var flag = false;// 是否匹配
// 遍历所有单元格。如果能确定特定的单元格，指定它们的下标，可以不用 for(var j...) 这个循环
for(var j = 0; j < tab.rows[i].cells.length; j++){
var str = tab.rows[i].cells[j].innerHTML;
var reg = new RegExp("^.*?(" + keyword + ").*?$", "gi");// 最好将正则表达式中的保留字符转义，这里没转
if(reg.test(str)){
tab.rows[i].style.backgroundColor = "yellow";
flag = true;
break;
}
}
if(!flag){
tab.rows[i].style.backgroundColor = "";
}
}
}
</script>
</head>
<body>
<input type="text" id="keyword" />
<input type="button" value="搜索" onclick="search()" />
<table id="tab1">
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>aaa</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>bbb</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>中文</td>
<td>222</td>
<td>333</td>
</tr>
</table>
</body>
</html>

唉,只恨自己懂delphi，从未研究过网页
现在是通过delphi已经生成了一个客户端的查询网页，想通过撰写客户端的脚本代码实现查找，通过数据库搜索要先在服务器查找，然后再返回客户端，由于数据量特别大，当然很耗时。
先试试sd5816690的代码。成了另开贴再送100分。

2楼正解
如果能确定哪一列是姓名的话，可以简略如下<INPUT TYPE="text" id="keyword" value="张"><INPUT TYPE="button" VALUE="搜索" ONCLICK="search(keyword.value)">
  <TABLE id="tab1">
  <TR>
<TD>姓名</TD>
<TD>年龄</TD>
  </TR>
  <TR>
<TD>张三</TD>
<TD>11</TD>
  </TR>
  <TR>
<TD>李四</TD>
<TD>22</TD>
  </TR>
  <TR>
<TD>王五</TD>
<TD>33</TD>
  </TR>
  <TR>
<TD>张六</TD>
<TD>44</TD>
  </TR>
  </TABLE>
  <SCRIPT LANGUAGE="JavaScript">
  
  </SCRIPT>

还有，以上是动态生成的表格，可是我的表是网页中已经生成的表，的怎样获得这个表对象呢？
也就是 <TABLE id="tab1">
中，我怎样从源码中获得tab1这个表对象呢？

我从delphi生成的网页源码中看到我一句
document.getElementById("IWDBGRID1FRXYNL")，其中WDBGRID1FRXYNL是我在delphi中的表格组件名称，是否可用
var MyTab=document.getElementById("IWDBGRID1FRXYNL")获得JavaScript中的表对象？
烦请各位大师继续指点。

如果能知道table的id就是"IWDBGRID1FRXYNL"的话，那
function search(key){
var tab1 = document.getElementById("IWDBGRID1FRXYNL");
for …………
就可以了

在
tab.rows[i].style.backgroundColor = "yellow";
后面加上
tab.rows[i].cells[0].focus();另外 8 楼的方法可行，如果取不到，可以用 getElementsByTagName("table")[下标] 来得到表格

我用这样的语句:
function search()
{
   var tab1 = document.getElementById("IWDBGrid1");
   var ctrl=LocateElement("IWEDIT1");
   var key=ctrl.value;
   for (var i=0; i<tab1.rows.length; i++)
        {
            if (tab1.rows[i].cells[0].innerText.indexOf(key) != -1) //
                tab1.rows[i].style.backgroundColor = "yellow";
            else tab1.rows[i].style.backgroundColor = "";
        }
    return true;
}search()
提示网页上有错误。
我用的web工具是intraweb(类似asp)，我从数据库获得数据生成网页。
intraweb中的按钮iwbutton可以执行javascript语句,格式是
先定义函数，再执行函数，函数必须返回一个bool。
比如：我在intrweb的一个iwbutton1中可以这样写(IWEDIT1是一个文本输入框）：
function preCheck()
{
   var ctrl=LocateElement("IWEDIT1");
if (ctrl.value.length < 8)
{
    window.alert("請輸入至少8 字元以上!!");
return false;
}
else
{
window.alert("輸入正确!!");
  return true;

}}preCheck()

看13楼的代码没什么错可能造成错误的原因：
1、大小写；以及各个元素是否存在
2、LocateElement 函数不存在
3、innerText 是 IE 特有的属性，最好用 innerHTML

确定 tab1 = document.getElementById("IWDBGrid1") 是一个table么？
不是div之类的嵌套出来的

加这段试试？ var tabs = document.getElementsByTagName("TABLE"); //取得所有table
var tab1;
for (var i=0; i<tabs.length; i++)
{
if (tabs[i].rows.length > 1000) //取得行数>1000的table
{
tab1 = tabs[i];
}
}

下面是intraweb生成的网页:自己看不懂,一头雾水,请大师门看看到底谁是表格对象<html><head><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="pragma" content="no-cache"><style type="text/css">
.IWEDIT1CSS {position:absolute;left:448;top:48;z-index:100;width:89;height:21;font: 13px;text-decoration: none;text-align:left;}
.IWBUTTON1CSS {position:absolute;left:464;top:120;z-index:100;width:75;height:25;font: 13px;text-decoration: none;}
.IWBUTTON2CSS {position:absolute;left:464;top:176;z-index:100;width:75;height:25;font: 13px;text-decoration: none;}
.IWDBGRID1CSS {position:absolute;left:8;top:32;z-index:100;width:425;height:353;font: 13px;text-decoration: none;}
</style><script language=JavaScript src="/js/IWPreScript.js_7.2.12"></script><script language="Javascript1.2">
var IWEDIT1IWCL = null;
var IWBUTTON1IWCL = null;
function IWBUTTON1_onclick() {
function preCheck()
{
   var ctrl=LocateElement("IWEDIT1");
if (ctrl.value.length < 8)
{
    window.alert("請輸入至少8 個字元以上!!");

}
else
{
window.alert("輸入正确!!");

}
return true;
}preCheck()
}var IWBUTTON2IWCL = null;
function IWBUTTON2_onclick() {
function search()
{
  var tab1 = document.all.IWDBGRID1;
  var ctrl=LocateElement("IWEDIT1");
  var key=ctrl.value;
  for (var i=0; i<tab1.rows.length; i++)
  {
  if (tab1.rows[i].cells[0].innerText.indexOf(key) != -1) //
  tab1.rows[i].style.backgroundColor = "yellow";
  else tab1.rows[i].style.backgroundColor = "";
  }
  return true;
}search()
}function rollon_IWDBGRID1(row,where){
var tablecolor;
if (where == 'over'){
currentcolor=document.getElementById(row).style.backgroundColor
document.getElementById(row).style.backgroundColor=''
}else{
document.getElementById(row).style.backgroundColor=currentcolor; }
}var IWDBGRID1IWCL = null;
function FormDefaultSubmit(){return false;}
var GIsPartialUpdate=false;
var GOnResizetimeout=1000;
var GURLBase="";var GAppID="0h34bgb1kgobpi13ntyrc1x823ug";var GTrackID=1
function IWTop(){return window;}
history.go(1);function Validate() {
  return true;
}function InitIWCLObjects() {IWEDIT1IWCL = CreateIWCLObject(IWCLForm, "IWEDIT1", "IWEDIT1IWCL");
if (IWEDIT1IWCL != null) {
  IWEDIT1IWCL.Visible = VisibilityStyle(IWEDIT1IWCL) != "hidden" && true;
}
IWBUTTON1IWCL = CreateIWCLObject(IWCLForm, "IWBUTTON1", "IWBUTTON1IWCL");
if (IWBUTTON1IWCL != null) {
  IWBUTTON1IWCL.Visible = VisibilityStyle(IWBUTTON1IWCL) != "hidden" && true;
}
if (IWBUTTON1IWCL != null) IWBUTTON1IWCL.HookEvent("click",IWBUTTON1_onclick);
IWBUTTON2IWCL = CreateIWCLObject(IWCLForm, "IWBUTTON2", "IWBUTTON2IWCL");
if (IWBUTTON2IWCL != null) {
  IWBUTTON2IWCL.Visible = VisibilityStyle(IWBUTTON2IWCL) != "hidden" && true;
}
if (IWBUTTON2IWCL != null) IWBUTTON2IWCL.HookEvent("click",IWBUTTON2_onclick);
IWDBGRID1IWCL = CreateIWCLObject(IWCLForm, "IWDBGRID1", "IWDBGRID1IWCL");
if (IWDBGRID1IWCL != null) {
  IWDBGRID1IWCL.Visible = VisibilityStyle(IWDBGRID1IWCL) != "hidden" && true;
}
}
function Initialize() {StaticInit();
InitSubmitter();
GActivateLock = true;
InitRects(995, 586);
InitIWCLObjects();
Body_OnResize();
if (document.body.leftMargin < 0 && document.body.topMargin < 0) {  document.body.leftMargin = 0;  document.body.topMargin = 0;}
ReleaseLock();
}</script><META HTTP-EQUIV="MSThemeCompatible" Content="yes"><META Name="GENERATOR" content="IntraWeb v7.2.12 Serial 72265306"><META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<script language=Javascript src="/js/IWCommon.js_7.2.12"></script><script language=Javascript src="/js/IWCL.js_7.2.12"></script><script language=Javascript src="/js/IWExplorer.js_7.2.12"></script>
</head><body onresize="return Body_OnResize();" topmargin="0" leftmargin="0" onload="Initialize()" onunload="ReleaseIWCL()" onblur="GSubmitting = false;SetBusy(false);"><table border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse; position:absolute; z-index:1000;
left:0; top:0" bordercolor="#111111" width="100%" id="locker"
height="100%"><tr><td></td></tr></table>
  <div id="bussyCursor" style="position:absolute;left:0;top:0;width:10000;height:10000;visibility:hidden;display:none;cursor:wait;z-index:10000"></div><form onsubmit="return FormDefaultSubmit();"><input type="TEXT" name="IWEDIT1" value="IWEdit1" class="IWEDIT1CSS" id="IWEDIT1"><input value="按时间" name="IWBUTTON1" type="button" class="IWBUTTON1CSS" id="IWBUTTON1"><input value="按姓名" name="IWBUTTON2" type="button" class="IWBUTTON2CSS" id="IWBUTTON2"></form><form onsubmit="return FormDefaultSubmit();"><div style="border-style:inset;border-width:thin;overflow-x:auto;overflow-y:auto;padding:0;clip:rect(0px,425px,353px,0px);" class="IWDBGRID1CSS" id="IWDBGRID1"><table id="IWDBGRID1" border="1" cellpadding="0" cellspacing="0" width="385" style="font: 13px;text-decoration: none;"><CAPTION>IWDBGrid1</CAPTION>
  <tr><td valign="middle" align="center" NOWRAP><font style="font-size:13px;">xm</font></td><td valign="middle" align="center" NOWRAP><font style="font-size:13px;">xb</font></td><td valign="middle" align="center" NOWRAP><font style="font-size:13px;">jdsj</font></td></tr>
  <tr id="153836281"><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">侯军林</font></td><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">男</font></td><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">2010-03-12</font></td></tr>
  <tr id="153836282"><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">阳慧平</font></td><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">男</font></td><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">2010-03-12</font></td></tr>
  <tr id="153836283"><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">周济华</font></td><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">男</font></td><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">2010-03-12</font></td></tr>
  <tr id="153836284"><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">伍勇杰</font></td><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">男</font></td><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">2010-03-12</font></td></tr>
  <tr id="153836285"><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">周黄葵</font></td><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">男</font></td><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">2010-03-12</font></td></tr>
  <tr id="153836286"><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">侯文彬</font></td><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">男</font></td><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">2010-03-12</font></td></tr>
  <tr id="153836287"><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">唐飞</font></td><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">男</font></td><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">2010-03-12</font></td></tr>
  <tr id="153836288"><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">田子润</font></td><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">男</font></td><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">2010-03-12</font></td></tr>
  <tr id="153836289"><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">张维</font></td><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">男</font></td><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">2010-03-12</font></td></tr>
  <tr id="1538362810"><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">邓传安</font></td><td valign="middle" align="left" NOWRAP><font style="font-size:13px;">2010-03-12</font></td></tr>
</table></div></form><form method="POST" name="SubmitForm" action="/EXEC/1/0h34bgb1kgobpi13ntyrc1x823ug">
  <input type="HIDDEN" name="IWEDIT1">
  <input type="HIDDEN" name="IWBUTTON1">
  <input type="HIDDEN" name="IWBUTTON2">
  <input type="HIDDEN" name="IWDBGRID1">
  <input type="HIDDEN" name="IW_Action">
  <input type="HIDDEN" name="IW_ActionParam">
  <input type="HIDDEN" name="IW_FormName" value="IWForm1">
  <input type="HIDDEN" name="IW_FormClass" value="TIWForm1">
  <input type="HIDDEN" name="IW_width">
  <input type="HIDDEN" name="IW_height">
</form>
</body></html>

这个是你要的表格
<table id="IWDBGRID1"
所以 tab1 = document.getElementById("IWDBGrid1") 应该是可以的呀……

啊！发现有个div也是id="IWDBGRID1"……
问题可能就出在这了

这样试试 var tabs = document.getElementsByTagName("TABLE");    //取得所有table
    var tab1;
    for (var i=0; i<tabs.length; i++)
    {
        if (tabs[i].id == "IWDBGRID1") //取得id是IWDBGRID1的table
        {
            tab1 = tabs[i];
break;
        }
    }
    function search(key){
        for (var i=0; i<tab1.rows.length; i++)
        {
            if (tab1.rows[i].cells[0].innerHTML.indexOf(key) != -1)                 tab1.rows[i].style.backgroundColor = "yellow";
            else tab1.rows[i].style.backgroundColor = "";
        }
    }

写串行了，应该是这样    function search(key){
var tabs = document.getElementsByTagName("TABLE");    //取得所有table
var tab1;
for (var i=0; i<tabs.length; i++)
{
if (tabs[i].id == "IWDBGRID1") //取得id是IWDBGRID1的table
{
tab1 = tabs[i];
break;
}
}
        for (var i=0; i<tab1.rows.length; i++)
        {
            if (tab1.rows[i].cells[0].innerHTML.indexOf(key) != -1) tab1.rows[i].style.backgroundColor = "yellow";
            else tab1.rows[i].style.backgroundColor = "";
        }
    }

我的老天爷呀，成功了！！！，真是遇见高手了。
function search(key){
        var tabs = document.getElementsByTagName("TABLE");    //取得所有table
        var tab1;
        for (var i=0; i<tabs.length; i++)
        {
            if (tabs[i].id == "IWDBGRID1") //取得id是IWDBGRID1的table
            {
                tab1 = tabs[i];
                break;
            }
        }
        for (var i=0; i<tab1.rows.length; i++)
        {
            if (tab1.rows[i].cells[0].innerHTML.indexOf(key) != -1) tab1.rows[i].style.backgroundColor = "yellow";
            else tab1.rows[i].style.backgroundColor = "";
        }
    return true;
  }
search(LocateElement("IWEDIT1").value)
运行通过！
请楼上大师再帮我实现滚动到当前行，不好意思，JavaScript太生疏了。
立马结帖，然后再开新贴送分，绝不食言！

哦,我自己实现了，不耽误大师的时间了。
立马结贴，并开贴送分。
请sd5816690、zyzy15两位大师前去http://topic.csdn.net/u/20100401/16/04e0c0af-1b1d-4f9a-92c5-6b5bcd56940d.html领分

……
  if (tab1.rows[i].cells[0].innerHTML.indexOf(key) != -1) {//大括号别忘了
    tab1.rows[i].style.backgroundColor = "yellow";
    tab1.rows[i].cells[0].focus();//加这句试试
  }//大括号别忘了
……

调试易

在表格内搜索

解决方案 »