非常着急----限制表格列操作~~~
有如下代码,已经实现输入条件过滤表格中所有单元格内容,现在我想限制其中某1列或几列不参加过滤,其余列参加.
也就是说网页制作人员通过简单操作表头控制某列不参加过滤,用户在页面上输入条件后过滤的是其余列中的单元格内容.请问该怎么写?
麻烦编写一个function(),然后通过对表头的操作,实现这一要求. 谢谢谢谢谢谢谢了:)~
对了,另外最好是还能使不参加过滤的列和其他列颜色不同.
<html >
<head >
<title > </title >
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" / >
</head >
<body >
<center >
<script type="text/javascript" >
function Search(Tbl,TextValue)
{
var count=0;
var keyWord=TextValue.value;
if(keyWord!="")
{
for(var i=0;i <Tbl.rows.length;i++)
{
var tr=Tbl.rows[i];
if(tr.innerHTML.indexOf(keyWord)==-1)
tr.style.display="none";
else
{
tr.style.display="block";
count++;
}
}
}
if(count==0)
{
alert( '找不到你要的记录！ ');
ListAll(Tbl);
}
}
function ListAll(Tbl)
{
for(var i=0;i <Tbl.rows.length;i++)
{
Tbl.rows[i].style.display="block";
}
}
</script >
<input name="ttt" id="ttt" type="text" style="width:200" >
<input type="button" value="查找" onclick="Search(Tbl1,ttt)" id="btFind" >
<input type="button" value="返回" onclick="ListAll(Tbl1)" id="btListAll" >
<br >
<table width="500" id="Tbl1" border="1" >
<tr > <td >12 </td > <td >34 </td > <td >45 </td > <td >45 </td > </tr >
<tr > <td >呵呵 </td > <td >56 </td > <td >1911 </td > <td >2 </td > </tr >
<tr > <td >12 </td > <td >55 </td > <td >1920 </td > <td >3 </td > </tr >
<tr > <td >ddd </td > <td >12 </td > <td >13 </td > <td >2356 </td > </tr >
<tr > <td >呵呵 </td > <td >55 </td > <td >1877 </td > <td >rt </td > </tr >
<tr > <td >ddeed </td > <td >11 </td > <td >12 </td > <td >hh </td > </tr >
<tr > <td >ddafd </td > <td >58 </td > <td >1988 </td > <td >77 </td > </tr >
</table >
</center >
</body >
</html >
[解决办法]
<html>
<head>
<base>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
</head>
<body>
<center>
<script type="text/javascript" >
function Search(Tbl,TextValue)
{
var count=0;
var keyWord=TextValue.value;
var searchColumns=new Array();
var options=cccccccc.options;
for (var i=0;i<options.length;i++){
if(options[i].selected) searchColumns.push(options[i].value-1);
}
alert(searchColumns);
if(keyWord!="")
{
var rows=Tbl.rows;
for(var i=0;i <rows.length;i++)
{
var tr=rows[i];
var b=false;
for(var j=0;j<searchColumns.length;j++){
if(tr.cells[searchColumns[j]].innerHTML.indexOf(keyWord)>-1) {b=true;break}
}
if(b)
tr.style.display="";
else
{
tr.style.display="none";
count++;
}
}
}
if(count==0)
{
alert( '找不到你要的记录！ ');
ListAll(Tbl);
}
}
function ListAll(Tbl)
{
for(var i=0;i <Tbl.rows.length;i++)
{
Tbl.rows[i].style.display="block";
}
}
</script >
列
<select size=4 multiple names=cccccccc id=cccccccc>
<option value=1 selected >1</option>
<option value=2 selected >2</option>
<option value=3 selected >3</option>
<option value=4 selected >4</option>
</select>关键字
<input name="ttt" id="ttt" type="text" style="width:200">
<br/><input type="button" value="查找" onclick="Search(Tbl1,ttt)" id="btFind">
<input type="button" value="返回" onclick="ListAll(Tbl1)" id="btListAll"><br>
<table width="500" id="Tbl1" border="1">
<tr>
<td>12</td>
<td>34</td>
<td>45</td>
<td>45</td>
</tr>
<tr>
<td>呵呵</td>
<td>56</td>
<td>1911</td>
<td>2</td>
</tr>
<tr>
<td>12</td>
<td>55</td>
<td>1920</td>
<td>3</td>
</tr>
<tr>
<td>ddd</td>
<td>12</td>
<td>13</td>
<td>2356</td>
</tr>
<tr>
<td>呵呵</td>
<td>55</td>
<td>1877</td>
<td>rt</td>
</tr>
<tr>
<td>ddeed</td>
<td>11</td>
<td>12</td>
<td>hh</td>
</tr>
<tr>
<td>ddafd</td>
<td>58</td>
<td>1988</td>
<td>77</td>
</tr>
</table>
</center>
</body>
</html>
[解决办法]
不要急，慢慢来，心急吃不了热豆腐的。程序是一个细心活，错一个字符，整个应用程序都会运行不了
你看看这样：把要搜索的列的列名放入一个数组，这个数组里表示的列是要搜索的。
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<center>
<script type="text/javascript">
var showIndex = new Array("食品", "日用"); //要显示的列名
function search()
{
var keyWord = document.getElementById("ttt").value; //关键字
var head = document.getElementById("Tbl1").tHead.rows[0];
var bodyRows = document.getElementById("Tbl1").tBodies[0].rows;
var searchCellIndexArray = new Array(); //要搜索的列的索引
for (var i = 0; i < head.cells.length; i++)
{
for (var j = 0; j < showIndex.length; j++)
{
if (head.cells[i].innerHTML.indexOf(showIndex[j]) > -1)
{
searchCellIndexArray.push(i);
break;
}
}
}
//高亮
heightColumn(searchCellIndexArray);
for (var i = 0; i < bodyRows.length; i++)
{
var currentRow = bodyRows[i];
var show = false; //是否显示该行
for (j = 0; j < searchCellIndexArray.length; j++)
{
if (currentRow.cells[searchCellIndexArray[j]].innerHTML.indexOf(keyWord) > -1) //关键字不存在，同隐藏该行
{
show = true;
}
}
if (show)
currentRow.style.display = "";
else
currentRow.style.display = "none";
}
}
function back()
{
var bodyRows = document.getElementById("Tbl1").tBodies[0].rows;
for (var i = 0; i < bodyRows.length; i++)
{
bodyRows[i].style.display = "";
}
}
//高亮显示
function heightColumn(columnsIndex)
{
var bodyRows = document.getElementById("Tbl1").tBodies[0].rows;
for (var i = 0; i < bodyRows.length; i++)
{
for (var j = 0; j < columnsIndex.length; j++)
bodyRows[i].cells[columnsIndex[j]].style.backgroundColor = "#eeeeee";
}
}
</script>
<input name="ttt" id="ttt" type="text" style="width:200" >
<input type="button" value="查找" onclick="search()" id="btFind">
<input type="button" value="返回" onclick="back()" id="btListAll">
<br>
<table width="500" id="Tbl1" border="1">
<thead>
<tr>
<td>食品 </td>
<td>日用 </td>
<td>化妆品 </td>
<td>体育用品 </td>
</tr>
</thead>
<tbody>
<tr>
<td>12 </td> <td>34 </td> <td>45 </td> <td>45 </td>
</tr>
<tr>
<td>呵呵 </td> <td>56 </td> <td>1911 </td> <td>2 </td>
</tr>
<tr>
<td>12 </td> <td>55 </td> <td>1920 </td> <td>3 </td>
</tr>
<tr>
<td>ddd </td> <td>12 </td> <td>13 </td> <td>2356 </td>
</tr>
<tr>
<td>呵呵 </td> <td>55 </td> <td>1877 </td> <td>rt </td>
</tr>
<tr>
<td>ddeed </td> <td>11 </td> <td>12 </td> <td>hh </td>
</tr>
<tr>
<td>ddafd </td> <td>58 </td> <td>1988 </td> <td>77 </td>
</tr>
</tbody>
</table>
</body>
</html>
