有个棘手的表格问题,请诸位帮忙

有一个表格，通过文本框输入条件过滤单元格，一行中若无符合条件的单元格便隐藏这一行,已经实现。
可现在问题来了，如果有单元格是跨行的可怎么办？
像下面的这个例子中的表格，单元格1跨了三行，过滤1的时候只能显示（1,a,x)也就是第一小行。可我想在过滤1的时候把被他跨越的几行都显示出来。
反之，在输入b过滤的时候只显示1,b,y行，这么说可能不太清楚，我把想要的效果写在Body中了，麻烦高手能把代码保存一下帮帮我看看。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<script type="text/javascript">var filtercolumns=""; 
                                          
                                              
function setFilter(Tbl) {         //限制某列埠参加过滤
                                   //var bgrColor;
//控制不可过滤列
for(var i=0;i<Tbl.rows[0].cells.length;i++) {
if(Tbl.rows[0].cells[i].getAttribute("filter")!=null &&Tbl.rows[0].cells[i].getAttribute("filter")=="false")
//判断触发事件的元素
{
//for(var j=0;j<Tbl.rows.length;j++) {
//Tbl.rows[j].cells[i].style.backgroundColor=bgrColor;           //改变限制列的颜色
//}
var temp = filtercolumns+i+ '|'; 
filtercolumns = temp; 
}
}
}function Search(Tbl,TextValue,FrontRows,BackRows) {             //按输入的条件过滤单元格
setFilter(Tbl);
var count=0;
var FrontRows;                  //头几行不参加过滤
var i=FrontRows;                //后几行步参加过滤
var BackRows; 
var keyWord=TextValue.value; 
if(keyWord!="") { 
for(i;i <Tbl.rows.length-BackRows;i++) { 
if(filtercolumns=="") { 
var tr=Tbl.rows[i]; 
if(tr.innerHTML.indexOf(keyWord)==-1) 
tr.style.display="none"; 
else { 
tr.style.display="block"; 
count++; 
} 
} 
else { 
var tfilter = filtercolumns.substr(0,filtercolumns.length-1); 
var columns = tfilter.split( '|'); 
var html = ""; 
for(var k=0;k <Tbl.rows[i].cells.length;k++) { 
var flag = true; 
for(var j=0;j <columns.length;j++) { 
var col= columns[j]; 
if(col==k) flag=false; 
} 
if(flag==true) { 
html += Tbl.rows[i].cells[k].innerHTML; 
} 
} 
if(html.indexOf(keyWord)==-1) 
Tbl.rows[i].style.display="none"; 
else { 
Tbl.rows[i].style.display="block"; 
count++; 
} 
} 
} 
} 
if(count==0) { 
ListAll(Tbl); 
alert( 'No Find!'); 
} 
} function ListAll(Tbl) { 
for(var i=0;i <Tbl.rows.length;i++) { 
Tbl.rows[i].style.display="block"; 
} 
}
</script>
<table id=FilTable width="425" border="1">
  <tr>
    <th scope="col">th1</th>
    <th scope="col">th2</th>
    <th scope="col">th3</th>
  </tr>
  <tr>
    <td rowspan="3">1</td>
    <td>a</td>
    <td>x</td>
  </tr>  <tr>
    <td>b</td>
    <td>y</td>
  </tr>
  <tr>
  <td>a</td>
  <td>f</td>
  </tr>
  <tr>
  <td>2</td>
  <td>2</td>
  <td>3</td>
  </tr>
     
 
</table>
<input name="condtext" id="condtext" type="text" style="width: 200">
<input type="button" value="查找" onclick="Search(FilTable,condtext,FrontRows=1,BackRows=0);">
<input type="button" value="返回" onclick="ListAll(FilTable)"><br><br><br>
希望得到的效果：<br>
在输入1查询的时候显示效果如下：<br>
<table width="425" border="1">
  <tr>
    <th scope="col">th1</th>
    <th scope="col">th2</th>
    <th scope="col">th3</th>
  </tr>
  <tr>
    <td rowspan="3">1</td>
    <td>a</td>
    <td>x</td>
  </tr>  <tr>
    <td>b</td>
    <td>y</td>
  </tr>
  <tr>
  <td>a</td>
  <td>f</td>
  </tr>
  </table>
<br>
在输入b查询的时候显示效果如下:<br>
<table width="425" border="1">
  <tr>
    <th scope="col">th1</th>
    <th scope="col">th2</th>
    <th scope="col">th3</th>
  </tr>
  <tr>
    <td>1</td>
    <td>b</td>
    <td>y</td>
  </tr>
</table></body>
</html>

解决方案 »

  1.   

        <table>
            <tr>
                <td>
                    1</td>
                <td>
                    <ul>
                        <li>a</li>
                        <li>a</li>
                        <li>a</li>
                        <li>a</li>
                    </ul>
                </td>
                <td>
                    <ul>                    
                        <li>a</li>
                        <li>a</li>
                    </ul>
                </td>
            </tr>
        </table>这样类似的结构
      

  2.   

    把CSS写好的话一切就简单了。