javascript表格查询

CutBug

于 2007-10-22 16:54:00 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS/Ajax 文章标签： javascript function table input button search

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/CutBug/article/details/1837620

JS/Ajax 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面包含一个可交互的表格。通过JavaScript实现了单元格的选择与高亮显示功能，并提供了基于选定列的文本搜索功能。此外，还提供了一键重置表格的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天看到web板块有人问此问题，自己在此基础上做了一个Demo

<html >

<head >

<title > </title >

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" / >

</head >

<script language="javaScript" >

var g_SelectColor = "cyan"; //高亮显示颜色

var g_SelectCells = []; //选择列index集合

var g_TableOuterHTML = ""; //table 的 outerHTML

Array.prototype.contains = function(o)

{ //判断数组arr中是否含有元素o

var flag = false;

for(var i=0;i<this.length;i++)

{

if(this[i]==o)

{

flag = true;

break;

}

}

return flag;

}

function $(id)

{//取得对象

return document.getElementById(id)

}

function init(objTable)

{//初始化table事件

g_TableOuterHTML = objTable.outerHTML;

objTable.onclick = function()

{

var objE = event.srcElement;

if(objE.tagName=="TD")

{

var iCell = objE.cellIndex;

with(objTable)

{

g_SelectCells.contains(iCell)?g_SelectCells.pop(iCell):g_SelectCells.push(iCell);

for(var i=0;i<rows.length;i++)

{

with(rows[i].cells[iCell])

{

if(bgColor=="")

{

bgColor=g_SelectColor;

}else

{

bgColor="";

}

}//end with

}// end for

}// end with

}//end if

}

}

function Search(table,str)

{//查询

var dis = "";

for(var i=0;i<table.rows.length;i++)

{

for(var j=0;j<g_SelectCells.length;j++)

{

if(table.rows[i].cells[g_SelectCells[j]].innerText.indexOf(str)>-1)

{

dis = "block";

break;

}

dis = "none";

}

table.rows[i].style.display=dis;

}

}

function Reset(objTable)

{//重置table

objTable.outerHTML = g_TableOuterHTML;

}

</script >

<body onload="init($('Tbl1'))">

<center >

<input id="condtext" type="text" style="width:200" >

<input type="button" value="查找" onclick="Search($('Tbl1'),$('condtext').value)" >

<input type="button" value="返回" onclick="Reset($('Tbl1'))" >

<br>

<table width="500" id="Tbl1" border="1" >

<tr > <td >1 </td > <td >a </td > <td >7 </td > </tr >

<tr > <td >2 </td > <td >b </td > <td >6 </td > </tr >

<tr > <td >3 </td > <td >c </td > <td >5 </td > </tr >

<tr > <td >4 </td > <td >d </td > <td >4 </td > </tr >

<tr > <td >5 </td > <td >e </td > <td >3 </td > </tr >

<tr > <td >6 </td > <td >f </td > <td >2 </td > </tr >

<tr > <td >7 </td > <td >g </td > <td >1 </td > </tr >

</table >

</center >

</body >

</html >

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。