又见表格问题,请帮忙:)~
有如下代码,主要是通过输入条件过滤出符合条件的行。现在我想添加几个radio,点选radio规定搜索条件的类型,然后在特定的列中过滤符合的单元格,最后显示那一行。
例如:表中有一列为物品数量,我在搜索的时候点中一个radio--(代表按物品数量搜索)--,在text中输入随意数字,点确定,然后就在物品数量这一列中过滤,找到符合条件的单元格后整行显示。
该怎么实现请帮忙,谢谢!
<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 " type= "text " style= "width:200 " >
<input type= "button " value= "查找 " onclick= "Search(Tbl1,ttt) " >
<input type= "button " value= "返回 " onclick= "ListAll(Tbl1) ">
<input type= "radio " name= "paytype " value= " " > 文字
<input type= "radio " name= "paytype " value= " " > 数字
<input type= "radio " name= "paytype " value= " " > 日期
<br>
<table width= "500 " id= "Tbl1 " border= "1 ">
<tr> <td> aaa </td> <td> 12 </td> <td> 1988 </td> </tr>
<tr> <td> 呵呵 </td> <td> 56 </td> <td> 1911 </td> </tr>
<tr> <td> ccc </td> <td> 55 </td> <td> 1920 </td> </tr>
<tr> <td> ddd </td> <td> 12 </td> <td> 1953 </td> </tr>
<tr> <td> 呵呵 </td> <td> 55 </td> <td> 1877 </td> </tr>
<tr> <td> ddeed </td> <td> 11 </td> <td> 1983 </td> </tr>
<tr> <td> ddafd </td> <td> 58 </td> <td> 1988 </td> </tr>
</table>
</center>
</body>
</html>
[解决办法]
把radio值设为列的index
<input type= "radio " name= "paytype " value= "0 " > 文字
<input type= "radio " name= "paytype " value= "1 " > 数字
<input type= "radio " name= "paytype " value= "2 " > 日期
然后改写那个函数
var tdIndex = 选中那个radio的value;
if(tr.childNodes[tdIndex].innerHTML.indexOf(keyWord)==-1)
这里加了一个childNodes[tdIndex]
[解决办法]
<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;
var tdIndex=document.getElementById( 'save ').value;
alert(tdIndex);
if(keyWord!= " ")
{
for(var i=0;i <Tbl.rows.length;i++)
{
var tr=Tbl.rows[i];
if(tr.childNodes[tdIndex].innerHTML.indexOf(keyWord)==-1)
tr.style.display= "none ";
else
{
tr.style.display= "block ";
count++;
}
}
}
if(count==0)
{
alert( 'error両 ');
ListAll(Tbl);
}
}
function ListAll(Tbl)
{
for(var i=0;i <Tbl.rows.length;i++)
{
Tbl.rows[i].style.display= "block ";
}
}
</script>
<input name= "ttt " type= "text " style= "width:200 " >
<input type= "button " value= "search " onclick= "Search(Tbl1,ttt) " >
<input type= "button " value= "back " onclick= "ListAll(Tbl1) ">
<input type= "radio " name= "paytype " id= "aa " value= "0 " onclick= "if(this.checked){document.getElementById( 'save ').value=this.value;} "> wenzi
<input type= "radio " name= "paytype " id= "bb " value= "1 " onclick= "if(this.checked){document.getElementById( 'save ').value=this.value;} "> shuzi
<input type= "radio " name= "paytype " id= "cc " value= "2 " onclick= "if(this.checked){document.getElementById( 'save ').value=this.value;} "> riqi
<input type= "hidden " name= "=save " id= "save ">
<br>
<table width= "500 " id= "Tbl1 " border= "1 ">
<tr> <td> aaa </td> <td> 12 </td> <td> 1988 </td> </tr>
<tr> <td> hehe </td> <td> 56 </td> <td> 1911 </td> </tr>
<tr> <td> ccc </td> <td> 55 </td> <td> 1920 </td> </tr>
<tr> <td> ddd </td> <td> 12 </td> <td> 1953 </td> </tr>
<tr> <td> hehe </td> <td> 55 </td> <td> 1877 </td> </tr>
<tr> <td> ddeed </td> <td> 11 </td> <td> 1983 </td> </tr>
<tr> <td> ddafd </td> <td> 58 </td> <td> 1988 </td> </tr>
</table>
</center>
</body>
</html>
测试通过。。